如何实现点击锚链接的当前项目就改变样式？在线等。


<script type="text/javascript">
    function currentPage() {
        if(!document.getElementById("nav")) return false;/*进行必要的测试，避免没有id为nav时候出错*/
        var nav=document.getElementById("nav");
        var links=nav.getElementsByTagName("a");
        var currenturl=window.location.href.split('#')[1]||'';/*获取当前页面的地址*/
        for(i=0;i<links.length;i++){
 if(!currenturl)continue;
            var url=links[i].getAttribute("href");/*获取链接的href值*/
            if(url.indexOf(currenturl)!=-1) {
                /*如果链接的href值在当前页面地址中有匹配*/
                links[i].className="current";
            }
        }
    }
     
    window.onload=currentPage;/*载入页面时加载*/
 
</script>

解决方案 »

  1.   

    <link rel="stylesheet" type="text/css" href="/***" id="swicth-style"/>
    $('#swicth-style').attr('href','/你的样式url' );
      

  2.   


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8" />
    <title>LINK</title>
    <style>
    .box { width: 100%; height: 1000px; float: left; background: #f0f0f0; margin: 20px 0; }
    #nav { background: #ccc; position: fixed; top: 0; left: 0; }
    .current { font-size: 44px; }
    </style>
    </head>
     
    <body>
    <script type="text/javascript">    function f() {
    var u=window.location.href.split('#')[1]||'';/*获取当前页面的地址*/
    $('#nav a').removeClass('current');
    if(!u)return;
    $('#nav a[href*="#'+u+'"]').addClass('current');
        }
         
        window.onload=f;/*载入页面时加载*/
    $(document).ready(function(){$('#nav a').click(function(){setTimeout(f,10)})})
     
    </script>
    <div id="nav">
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <a href="#product">Product</a>
    <a href="#hr">HR</a>
    <a href="#cooprate">Cooperate</a>
    <a href="#case">Case</a>
    <a href="#news">News</a>
    <a href="#what">What</a>
    </div>
     
    <div id="about" class="box"></div>
    <div id="contact" class="box"></div>
    <div id="product" class="box"></div>
    <div id="hr" class="box"></div>
    <div id="cooprate" class="box"></div>
    <div id="case" class="box"></div>
    <div id="news" class="box"></div>
    <div id="what" class="box"></div>
     
    </body>
    </html>