JS导航栏功能实现

向右看齐 2024-04-11 13:22 91阅读 0赞

慕课网JS课程结课例子

效果：

![2019082122043998.gif][]

<!DOCTYPE HTML>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>JS實現ul導航欄</title>
    <style>
    
    ul {
      display:flex;
      list-style: none;
      display: block;
      height: 30px;
      margin: 5px;
      padding: 0;
    }
    
    ul li{
     
      display: inline-block;
      border: 1px solid #cccccc;
      border-bottom:0;
      margin: 0 5px 5px 0;
      padding: 5px  10px;
      font-size: 16px;
      cursor: pointer;
      
    }
    
    #information{
      font-size: 16px;
      width: 380px;
      height: 200px;
      border:1px solid #ccc; 
      border-top: 2px solid #d31919;
      
    }
    .current{
      border-top: 2px solid #d31919!important;
      position: relative;
    }
    .current:after {
      content:""; 
      position:absolute; 
      height:2px; width:100%; 
      left:0; bottom:-3px; 
      z-index:1; 
      background:#fff;
    }
    
    .hide{
      display: none;
    }
    
    </style>
    
    </head>
    <body>
    <div id="content">
      <ul id="table">
        <li class="current">房产</li>
        <li>家居</li>
        <li>二手房 </li>
      </ul>
      <div id="information">
      <div >
          <p>275万购昌平邻铁三居 总价20万买一居</p>
          <p>200万内购五环三居 140万安家东三环</p>
          <p>北京首现零首付楼盘 53万购东5环50平</p>
          <p>京楼盘直降5000 中信府 公园楼王现房</p>
    
      </div>
      <div class="hide">
          <p>40平出租屋大改造 美少女的混搭小窝</p>
          <p> 经典清新简欧爱家 90平老房焕发新生</p>
          <p>新中式的酷色温情 66平撞色活泼家居</p>
          <p>瓷砖就像选好老婆 卫生间烟道的设计</p>
      
      </div>
      <div class="hide">
      
        <p>通州豪华3居260万 二环稀缺2居250w甩</p>
        <p>西3环通透2居290万 130万2居限量抢购</p>
        <p>黄城根小学学区仅260万 121平70万抛!</p>
        <p>独家别墅280万 苏州桥2居优惠价248万</p>
     </div>
    </div>
    </div>
    
    <script>
    var table = document.getElementById("table");
    var list = document.getElementsByTagName("li");
    
    var infor = document.getElementById("information");
    var divs  = infor.getElementsByTagName("div");
    
    //1.循环遍历li
    for(var i=0;i<list.length ;i++){
    
     
      list[i].setAttribute("index",i);
    
    //2.为每一个li设置鼠标滑过事件
      list[i].onmouseover = function (){
    //3.鼠标排他思想  把所有的当默认样式
    for(var j=0;j<list.length;j++){
      list[j].className="";
       divs[j].className = "hide";
    }
        //4.当前的li设置样式
        var index = this.getAttribute("index");
        this.className= "current";
        divs[index].className ="";
        
    
      };
    }
    
    
    </script>
     </body>
    
    </html>

[2019082122043998.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/39c299d81ad54edab9d38e2226973b70.gif