JS导航栏功能实现

最新推荐文章于 2023-03-05 16:34:19 发布

403_ss

最新推荐文章于 2023-03-05 16:34:19 发布

阅读量1k

点赞数

分类专栏： JavaScript html

本文链接：https://blog.csdn.net/weixin_40980087/article/details/100001134

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

慕课网JS课程结课例子

效果：

<!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>

403_ss

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS导航栏功能实现

慕课网JS课程结课例子效果：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JS實現ul導航欄</title><style>...
复制链接

扫一扫