jquery和CSS实现导航效果给li设置样式属性问题

例如：
<ul>
<li class="on"><a href="#">首页</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li><a href="#">台球</a></li>
</ul>点击 台球 跳转到链接的话就改变html如下代码所示
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li class="on"><a href="#">台球</a></li>
</ul>CSS代码
.mainnav{ background:#292929; height:43px; margin-top:1px; margin-bottom:10px;}
.mainnav ul{}
.mainnav ul li{ float:left; display:inline;  right no-repeat; padding-right:2px;}
.mainnav ul li a{ display:inline-block; height:43px; line-height:43px; padding:0 23px; font-size:14px; color:#fff; font-weight:bold;}
.mainnav ul li a:hover{ text-decoration:none; color:#e87717;}
.mainnav ul li.on a{ color:#e87717;}========================================================
效果就是实现点击后改变颜色。我试着用这个代码去解决
<script>$(function(){$(".mainnav ul li").eq(0).addClass("on")})</script>我不了解JS和jquery 
请帮忙贴出下完整代码  谢谢各位了。

解决方案 »

  1.   


    $(function() {
        var $ul = $('ul');
        $ul.delegate('li', 'click', function() {
            $ul.find('li').each(function(i, dom) {
                $(this).removeClass('on');
            });
            $(this).addClass('on');
        });
    });
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://img.renzhe.com/static/js/jquery-1.8.3.min.js"></script>
    <title>无标题文档</title>
    <style type="text/css">
    .mainnav{ background:#292929; height:43px; margin-top:1px; margin-bottom:10px;}
    .mainnav ul{}
    .mainnav ul li{ float:left; display:inline;  right no-repeat; padding-right:2px;}
    .mainnav ul li a{ display:inline-block; height:43px; line-height:43px; padding:0 23px; font-size:14px; color:#fff; font-weight:bold;}
    .mainnav ul li a:hover{ text-decoration:none; color:#e87717;}
    .mainnav ul li.on a{ color:#e87717;}</style>
    </head><body>
    <div class="mainnav">
    <ul>
    <li class="on"><a href="#">首页</a></li>
    <li><a href="#">主页</a></li>
    <li><a href="#">足球</a></li>
    <li><a href="#">篮球</a></li>
    <li><a href="#">台球</a></li>
    </ul>
    </div>
    <script type="text/javascript">
    jQuery(function($){
    $('li').bind('click',function(){
    $(this).addClass('on');
    $('li').not($(this)).removeClass('on');
    });});
    </script>
    </body>
    </html>
      

  3.   

    首先应该给ul加个id或者类，区分其他li
    第二，你的页面已经跳转，不能再使用js的click事件了.应该在每个页来设置。正如你自己的代码
    <script>$(function(){$(".mainnav ul li").eq(0).addClass("on")})</script>
      

  4.   

    xiaofanku的代码单独运行是没问题。但是我直接用在我的代码里发现没有效果。
    问题是这样的 我的li是dede标签栏目调用循环出来的导航栏。
     <div class="mainnav">
      <ul>
       <li><a href="{dede:global.cfg_indexurl/}">首页</a></li>
    {dede:channel row='8'  type ='top'    }
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
      </ul>