导航js

<!-- nav js start -->
<script>
    window.οnlοad=function(){

  //导航下子导航显示的加载js    2014 06 22

        //var myURL1 = document.location.href;
 
        if(window.location.href.indexOf("/cy/")>-1){
    var ss2=document.getElementById("s_2");
             ss2.style.display="block";
  }else if(window.location.href.indexOf("/fz/")>-1){
       var ss3=document.getElementById("s_3");
             ss3.style.display="block";
  }else if(window.location.href.indexOf("/jx/")>-1){
       var ss4=document.getElementById("s_4");
             ss4.style.display="block";
  }else if(window.location.href.indexOf("/jj/")>-1){
       var ss5=document.getElementById("s_5");
             ss5.style.display="block";
  }else if(window.location.href.indexOf("/sp/")>-1){
       var ss6=document.getElementById("s_6");
             ss6.style.display="block";
  }else if(window.location.href.indexOf("/mr/")>-1){
       var ss7=document.getElementById("s_7");
             ss7.style.display="block";
  }else if(window.location.href.indexOf("/bj/")>-1){
       var ss8=document.getElementById("s_8");
             ss8.style.display="block";
  }else if(window.location.href.indexOf("/jy/")>-1){
       var ss9=document.getElementById("s_9");
             ss9.style.display="block";
  }else if(window.location.href.indexOf("/wl/")>-1){
       var ss10=document.getElementById("s_10");
             ss10.style.display="block";
  }else if(window.location.href.indexOf("/hb/")>-1){
  
       var ss11=document.getElementById("s_11");
             ss11.style.display="block";
  
  }else{
    var ss1=document.getElementById("s_1");
             ss1.style.display="block";
  
  }
 

///导航下子导航显示的结束js
///主导航高亮显示js start
  
    var keyarr = new Array('cy','fz','jx','jj','sp','mr','bj','jy','wl','hb');
       var vaarr  = new Array('m_2','m_3','m_4','m_5','m_6','m_7','m_8','m_9','m_10','m_11');
       for(var i=2;i<12;i++){
 //alert(keyarr[i-2]);
           if(window.location.href.indexOf("/"+keyarr[i-2]+"/")>-1){
            document.getElementById(vaarr[i-2]).className ='m_li_a';     
        }
      }

///主导航高亮显示js end
 
//    子导航点亮按钮    2014 06 22
 var myNav = document.getElementById("kind_menu").getElementsByTagName("a");
    //获取当前窗口的url
    var myURL = window.location.href;
 var arrUrl=myURL.split("/");
 for(var i=0;i<myNav.length;i++){
    myNav[i].className="";
 }
 // alert(arrUrl);
    //循环div下面所有的链接,
    for(var i=0;i<myNav.length;i++){
    //获取每一个a标签的herf属性
    var links = myNav[i].getAttribute("href");
    var myURL = document.location.href;
 
    //查看div下的链接是否包含当前窗口,如果存在,则给其添加样式
    //  if(myURL.indexOf(links) != -1){
  if(myURL=="http://news.28.com/"){
   
     for(var i=0;i<myNav.length;i++){
             myNav[i].className="";
       }
   
   }else{
   
   if(links.indexOf("/"+arrUrl[3]+"/") > -1){
            myNav[i].className="cc";
            // myNav[0].className="";
    
    }
  
      }
  
    }
///点亮按钮结束


 }

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
二级导航可以通过以下步骤实现: 1. 首先,在HTML中创建一个包含所有导航链接的列表。 ``` <ul class="nav-list"> <li><a href="#">Link 1</a></li> <li class="has-subnav"> <a href="#">Link 2</a> <ul class="subnav-list"> <li><a href="#">Sublink 1</a></li> <li><a href="#">Sublink 2</a></li> <li><a href="#">Sublink 3</a></li> </ul> </li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> ``` 2. 接下来,使用CSS隐藏所有子导航。 ``` .subnav-list { display: none; } ``` 3. 使用JavaScript添加事件监听器,以便在鼠标悬停或点击时显示子导航。 ``` // 获取所有具有子导航的列表项 var hasSubnav = document.querySelectorAll('.has-subnav'); // 遍历所有列表项,并为每个添加事件监听器 for (var i = 0; i < hasSubnav.length; i++) { // 鼠标悬停时显示子导航 hasSubnav[i].addEventListener('mouseenter', function() { this.querySelector('.subnav-list').style.display = 'block'; }); // 鼠标离开时隐藏子导航 hasSubnav[i].addEventListener('mouseleave', function() { this.querySelector('.subnav-list').style.display = 'none'; }); // 点击时切换子导航的显示/隐藏状态 hasSubnav[i].addEventListener('click', function(event) { event.preventDefault(); // 防止链接被点击时跳转到其他页面 var subnav = this.querySelector('.subnav-list'); if (subnav.style.display === 'block') { subnav.style.display = 'none'; } else { subnav.style.display = 'block'; } }); } ``` 通过以上步骤,就可以在网站中添加一个基本的二级导航。当鼠标悬停在具有子导航的链接上时,子导航会出现;当鼠标离开时,子导航会消失。另外,点击链接也会切换子导航的显示/隐藏状态。你可以根据自己的需要修改JavaScript代码来实现更高级的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值