导航上的点击相应的页面 上面的相应CSS会变怎么做
就比如http://www.zjct.org/ 这个上面的导航 点击首页 页面 按钮就变成红色 点击哪里CSS都会变 用JS怎么写 google了半天也找不到答案

解决方案 »

  1.   

    <li class="li06 zuo colorf"><a class="ah06" href="/zjcyy/cypz/">创意铺子</a></li>
    <li class="li07 colorf"><a class="ah07" href="/zjcyy/mrt/">名人堂</a></li>
    看到这个源码
    目测都是静态页面,写死的链接,然后点链接对应的页面的链接li的样式不懂
    可以用js来操作,只不过增加frameset以及frame即可
      

  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>
        <title></title>
        <style type="text/css">
            .Menu *
            {
                margin: 0px 0px;
                padding: 0px 0px;
                line-height: 24px;
            }
            .Menu ul
            {
                list-style: none;
            }
            .Menu ul li
            {
                float: left;
                width: 64px;
                border: 1px solid #97B4D1;
                background-color: Yellow;
                margin-left: -1px;
                cursor: pointer;
            }
            .Menu ul li:hover
            {
                background-color: blue;
            }
            .Menu ul li.Selected
            {
                background-color: red;
            }
            .Menu ul li ul
            {
                clear: both;
                display: none;
                width: 128px;
                margin-top: 1px;
                margin-left: -32px;
                background-color: Gray;
            }
            .Menu ul li ul li
            {
                float: none;
                width: 100%;
                margin-top: -1px;
            }
            .Menu ul li ul li:hover
            {
                background-color: Aqua;
            }
            .Menu ul li:hover ul
            {
                display: block;
                position: absolute;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var divMenuJQ = $("#divMenu");
                $(">ul>li", divMenuJQ).bind("click", function () {
                    $(">ul>li.Selected", divMenuJQ).removeClass("Selected");
                    $(this).addClass("Selected");
                });
            });
        </script>
    </head>
    <body>
        <div id="divMenu" class="Menu">
            <ul>
                <li>
                    <div>
                        菜单1
                    </div>
                    <ul>
                        <li>
                            <div>
                                菜单1_1 sssssssss</div>
                        </li>
                        <li>
                            <div>
                                菜单1_2</div>
                        </li>
                        <li>
                            <div>
                                菜单1_3</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        菜单2
                    </div>
                    <ul>
                        <li>
                            <div>
                                菜单2_1</div>
                        </li>
                        <li>
                            <div>
                                菜单2_2</div>
                        </li>
                        <li>
                            <div>
                                菜单2_3</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        菜单3
                    </div>
                    <ul>
                        <li>
                            <div>
                                菜单3_1</div>
                        </li>
                        <li>
                            <div>
                                菜单3_2</div>
                        </li>
                        <li>
                            <div>
                                菜单3_3</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    </html>
      

  3.   


    <style>
    ul,li { margin: 0; padding: 0; list-style: none;}
    li{  width:150px;margin:1px; float:left; background-color: #068AC8; color:#fff;  }
    .def{background-color: #EC008C; }
    </style>
    <div id="header">
    <ul>
      <li class="def">首页</li> <li>园区概况</li><li>xxxxx</li>
    </ul>
    </div>
    <script>
      var lis=document.getElementsByTagName('li'),act;
      for(var i=0;i<lis.length;i++)
       lis[i].onclick=function(){
        (act||lis[0]).className='';
        this.className='def';
        act=this;
       }
    </script>
      

  4.   

    你们都没明白我的意思 我的问题是加了超级链接 一旦跳转到另外个页面 css全部没了
    <div class="header_s_li">
    <ul>
    <li class="h1"><a target="_blank" href="#"><img src="images/header/header_1.png" /></a></li>
    <li><a target="_blank" href="#"><img src="images/header/header_2.png" /></a></li>
    <li><a target="_blank" href="#"><img src="images/header/header_3.png" /></a></li>
    <li><a target="_blank" href="#"><img src="images/header/header_4.png" /></a></li>
    <li><a target="_blank" href="#"><img src="images/header/header_5.png" /></a></li>
    </ul>
    </div>$(document).ready(function(){$('.header_s_li ul li').click(function() {
      
      $(this).addClass("h1");
    });
    });