JQuery来回切换不同的样式

发布网友发布时间：2022-05-06 12:25

共3个回答

热心网友时间：2022-04-23 00:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>
    <title></title>
    <style type="text/css">
        .orange{  background-color:Orange;}

        .white{ background-color:white;}
        span{width:100px; height:40px; line-height:40px; border: 2px solid Orange;-moz-border-radius: 5px;      /* Gecko browsers */
                 -webkit-border-radius: 5px;   /* Webkit browsers */
                 border-radius:5px;            /* W3C syntax */
                 display:block;
                 cursor:pointer;
                 float:left;
                 margin-left:25px; text-align:center;}
    </style>
    <script src="../js/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("span").click(function () {
                $(this).attr("class", "orange");
                $(this).siblings().attr("class", "white");
            });
        });
    </script>
</head>
<body>
       <div>
           <span class="orange">A区</span>
           <span class="white">B区</span>
           <span class="white">C区</span>
           <span class="white">D区</span>
           <span class="white">E区</span>
       </div>
</body>
</html>

第一步：设置当前点击的元素的样式

第二步：设置除当前点击之外的所有兄弟元素的样式！

$(object).siblings()获取当前元素之外所有的兄弟元素！

请采纳

热心网友时间：2022-04-23 01:26

$(this).removeClass("white").addClass("orange").siblings().removeClass("orange").addClass("white");

热心网友时间：2022-04-23 03:00

$("font").click(function(){
$("font .orange").removeClass("orange").addClass("white");

$(this).removeClass("white").addClass("orange");
})

看看基本思路是这样的代码没测试追问

效果出来一半。。选择其他的，，它的背景颜色不变成白色~~

还有页面有多个font标签



追答$("font .orange").removeClass("orange").addClass("white");

$("font ").removeClass("orange").addClass("white");