导航栏有若干个栏目，点击其中一个 让它背景变色，其他的都为原始颜色

[快乐起航2020]

导航栏有若干个栏目，点击其中一个 让它背景变色，其他的都为原始颜色

js addClass removeClass怎么实现来着，
求助好心人了

[insus]

Refer: http://www.cnblogs.com/insus/archive/2012/09/25/2700939.html http://www.cnblogs.com/insus/p/3207936.html

[以专业开发人员为伍]

只给你提醒点原理。对于样式改变，就是删除原来的class名称，设置为新的class名称。而class名称，定义在css文件中。

[以专业开发人员为伍]

js的“只有一行代码”的需求，用不到考虑asp.net编程吧？！

[bwangel]

    <style>
        .actived {
            background: red;
        }

        .noactive {
            background:;
        }
    </style>
         <ul id="menu">
            <li> <a href="#">Menu1</a></li>
            <li> <a href="#">Menu2</a></li>
            <li> <a href="#">Menu3</a></li>
        </ul>
        <script>
            $('#menu li').click(function () {
                var f = this;
                $('#menu li').each(function () {  this.className = this == f ? 'actived' : 'noactive'   });
            });
        </script>

[快乐起航2020]

引用 3 楼 sp1234 的回复:

js的“只有一行代码”的需求，用不到考虑asp.net编程吧？！

同感

[快乐起航2020]

引用 2 楼 sp1234 的回复:

只给你提醒点原理。对于样式改变，就是删除原来的class名称，设置为新的class名称。而class名称，定义在css文件中。

请教一下这位师傅 就是我对于原理了解的比较深，但是经常具体代码写不来 ，请教一下，怎么改进啊

[风吹裤衩轻飞扬丶]

貌似是获取鼠标的点击事件，然后得到当前的ID，然后再把当前的这个栏目的CSS改变了就好了。

[以专业开发人员为伍]

引用 6 楼 XiaoPeiyuan2020 的回复:

[quote=引用 2 楼 sp1234 的回复:] 只给你提醒点原理。对于样式改变，就是删除原来的class名称，设置为新的class名称。而class名称，定义在css文件中。

请教一下这位师傅 就是我对于原理了解的比较深，但是经常具体代码写不来 ，请教一下，怎么改进啊[/quote] #4楼不是有么。 其实如果你不熟悉 jQuery，而不用jQuery而使用标准的javascript轮询DOM Children对象来执行 setAttribute("class",....) 或者 setAttribute("className",....) 也一样。使用不同语言的基础，当然就是知道这个原理啦。 如果用任何编程语言你都无法“执行”你的设计，那么就不要自诩为学会了原理。没有一个原理是脱离了实践的，脱离了实践那么一定说明你还不会原理。

[快乐起航2020]

引用 7 楼 sp1234 的回复:

[quote=引用 6 楼 XiaoPeiyuan2020 的回复:] [quote=引用 2 楼 sp1234 的回复:] 只给你提醒点原理。对于样式改变，就是删除原来的class名称，设置为新的class名称。而class名称，定义在css文件中。

请教一下这位师傅 就是我对于原理了解的比较深，但是经常具体代码写不来 ，请教一下，怎么改进啊[/quote] #4楼不是有么。 其实如果你不熟悉 jQuery，而不用jQuery而使用标准的javascript轮询DOM Children对象来执行 setAttribute("class",....) 或者 setAttribute("className",....) 也一样。使用不同语言的基础，当然就是知道这个原理啦。 如果用任何编程语言你都无法“执行”你的设计，那么就不要自诩为学会了原理。没有一个原理是脱离了实践的，脱离了实践那么一定说明你还不会原理。[/quote] 你好！我不是懂得原理，是自己感觉在分析软件运行的过程（步骤） 感觉自己比较拿手，但是具体的代码实现，感觉自己知识还有点欠缺

[grn0515]

 <style type="text/css">
        .menu{ list-style:none; margin:0; padding:0;}
        .menu li{ float:left; width:100px; height:30px; background:Blue; color:White; margin:3px; text-align:center; line-height:30px; }
        .menu li.sel{ background:White; color:Black;width:100px; height:30px;}
    </style>
   <script type="text/javascript">
        $(function () {
            $(".menu li").click(function () {
                $(this).siblings().removeClass();  
                $(this).toggleClass("sel");
                
            })
        });

     
    </script>

   <ul class="menu">
            <li class="sel"> Menu1</li>
            <li> Menu2</li>
            <li> Menu3</li>
        </ul>

[快乐起航2020]

引用 10 楼 grn0515 的回复:

 <style type="text/css">
        .menu{ list-style:none; margin:0; padding:0;}
        .menu li{ float:left; width:100px; height:30px; background:Blue; color:White; margin:3px; text-align:center; line-height:30px; }
        .menu li.sel{ background:White; color:Black;width:100px; height:30px;}
    </style>
   <script type="text/javascript">
        $(function () {
            $(".menu li").click(function () {
                $(this).siblings().removeClass();  
                $(this).toggleClass("sel");
                
            })
        });

     
    </script>

   <ul class="menu">
            <li class="sel"> Menu1</li>
            <li> Menu2</li>
            <li> Menu3</li>
        </ul>

这个貌似不可以

[bert651153338]

$(this).addClass("className").siblings().removeClass("className"); 这个是可以的。 不明白可以Q私聊。。

[快乐起航2020]

引用 4 楼 bwangel 的回复:

    <style>
        .actived {
            background: red;
        }

        .noactive {
            background:;
        }
    </style>
         <ul id="menu">
            <li> <a href="#">Menu1</a></li>
            <li> <a href="#">Menu2</a></li>
            <li> <a href="#">Menu3</a></li>
        </ul>
        <script>
            $('#menu li').click(function () {
                var f = this;
                $('#menu li').each(function () {  this.className = this == f ? 'actived' : 'noactive'   });
            });
        </script>

这个不行啊

[baidu_22220391]

不行啊 第一点击该颜色 第二个点击 该颜色 第一个第二个一样颜色 啊 其中一个该就行吗/

[xiaoxiaodii]

为什么我引用10楼的，开始第一个变色，点击下一个同样变色，可是只在点击的时候变色，依然停留在第一个菜单上，为什么？请指教