如何使超链接导航栏在CSS或JavaScript中处于活动状态？

我想使用CSS和JavaScript做一个导航栏，我的代码工作得很好所有它的作用是当链接被点击hoover看保持活动。是否有任何其他的方式来做到这一点，因为我觉得我的JavaScript代码是不是真的有效如何使超链接导航栏在CSS或JavaScript中处于活动状态？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 
     <link href="main.css" rel="stylesheet" type="text/css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script type="text/javascript"> 
      window.onload = function() { 
       function clicka(num) { 
        console.log(num); 
        if(num == 1){ 
         document.getElementById(num).className = 'active'; 
         document.getElementById('2').className = 'unactive'; 
         document.getElementById('3').className = 'unactive'; 
         document.getElementById('4').className = 'unactive'; 
        } 
        else if(num == 2){ 
         document.getElementById('1').className = 'unactive'; 
         document.getElementById(num).className = 'active'; 
         document.getElementById('3').className = 'unactive'; 
         document.getElementById('4').className = 'unactive'; 
        } 
        else if(num == 3){ 
         document.getElementById('1').className = 'unactive'; 
         document.getElementById('2').className = 'unactive'; 
         document.getElementById(num).className = 'active'; 
         document.getElementById('4').className = 'unactive'; 
        } 
        else if(num == 4){ 
         document.getElementById('1').className = 'unactive'; 
         document.getElementById('2').className = 'unactive'; 
         document.getElementById('3').className = 'unactive'; 
         document.getElementById(num).className = 'active'; 
        } 
       } 
       var a = document.getElementById('click'); 
       var b = document.getElementById('click2'); 
       var c = document.getElementById('click3'); 
       var d = document.getElementById('click4'); 

       a.onclick = function(){ 
        clicka('1'); 
       } 
       b.onclick = function(){ 
        clicka('2'); 
       } 
       c.onclick = function(){ 
        clicka('3'); 
       } 
       d.onclick = function(){ 
        clicka('4'); 
       } 
      } 
     </script> 
    </head> 
    <body class="body"> 
     <header class="mainHeader"> 
      <img src="rrr.jpg"> 

      <nav><ul> 
        <li class="active" id="1"><a href="#" id="click">Home</a></li> 
        <li class="unactive" id="2"><a href="#" id="click2">About</a></li> 
        <li class="unactive" id="3"><a href="#" id="click3">Portfolio</a></li> 
        <li class="unactive" id="4"><a href="#" id="click4">Contact</a></li> 
      </ul></nav> 
     </header> 




body{ 
    background-color:#F0F0F0 ; 
    color:#000305; 
    font-size: 87.5%; 
    font-family: Arial,'Lucida Sans Unicode'; 
    line-height: 1.5; 
    text-align: left; 
} 

a{ 
    text-decoration: none; 
} 

a:link, a:visited{ 

} 

a:hover, a:active{ 

} 

.body{ 
    margin:0 auto; 
    width:70%; 
    clear:both; 
} 

.mainHeader img{ 
    width:30%; 
    height:auto; 
    margin: 2% 0; 
} 

.mainHeader nav{ 
    background-color: #666; 
    height: 40px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.mainHeader nav ul{ 
    list-style: none; 
    margin: 0 auto; 
} 

.mainHeader nav ul li{ 
    float: left; 
    display: inline; 
} 

.mainHeader nav a:link, .mainHeader nav a:visited{ 
    color:#fff; 
    display: inline-block; 
    padding: 10px 25px; 
    height: 20px; 
} 

.mainHeader nav a:hover, .mainHeader nav a:active, 
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{ 
    background-color: #cf5c3f; 
    text-shadow: none; 
} 

.mainHeader nav ul li a{ 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}

来源

2014-05-12 Karish Karish

试试这个：

function clicka(num) { 
    var nav = document.getElementById('navbar'), c = nav.children, l = c.length, i; 
    for(i=0; i<l; i++) c[i].className = "unactive"; 
    document.getElementById(num).className = "active"; 
} 

// <ul id="navbar"><li...>...</li></ul>

要简单得多，）

来源

2014-05-12 22:28:23

如何使超链接导航栏在CSS或JavaScript中处于活动状态？

回答

相关问题