原生JS和 jquery 分别实现导航栏的切换

智慧秃头少女

已于 2022-06-14 15:44:32 修改

阅读量1.8k

点赞数 3

分类专栏：笔记文章标签： javascript 前端 html

于 2022-06-13 11:35:50 首次发布

本文链接：https://blog.csdn.net/Yangye_1018/article/details/125255119

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

js实现导航栏切换

好久没有更新了，最近我会持续更新，目前在南宁进行培训，每天我都会将所学习的笔记进行整理发布，喜欢的点点赞吧！

今天主要是如何通过js和jq来实现如何进行导航栏切换，具体效果如下图所示：
在这里插入图片描述代码如下：

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .cont {
      position: relative;
      width: 500px;
      height: 400px;
      border: 1px solid pink;
      margin: 100px auto;
    }

    .cont h1 {
      height: 30px;
      font-size: 16px;
      border-bottom: 2px solid red;
    }

    .cont h1 span {
      float: left;
      list-style: 30px;
      background: pink;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }

    .cont h1 .cur {
      background: yellow;
      color: white;
    }

    .cont .con {
      position: absolute;
      left: 0;
      top: 50px;
      width: 500px;
      height: 300px;
      display: none;
    }
  </style>
</body>

<div class="cont" id="cont">

  <h1>
    <span class="cur">流行</span>
    <span>摇滚</span>
    <span>华语</span>
    <span>粤语</span>
  </h1>

  <div class="con" style="background-color: burlywood;">流行</div>
  <div class="con" style="background-color: pink;">摇滚</div>
  <div class="con" style="background-color: yellow;">华语</div>
  <div class="con" style="background-color: blue;">粤语</div>
</div>

<script>
var cont=document.getElementById('cont');
var span=cont.getElementsByTagName('span');
var con=cont.getElementsByClassName('con');

//默认显示第一个
con[0].style.display="block";

var length =span.length; //获取标题长度
for(var i=0;i<length;i++){
  var a=span[i];
  a.index=i;  //每个标题对应的索引

  a.onclick = function(){   //点击清除标题样式
    for(var j=0;j<length;j++){
      span[j].className = '';
      con[j].style.display = 'none';  //隐藏所有内容

      this.className='cur'; //给当前标题添加cur样式
      i=this.index; //获取当前索引值
      con[i].style.display='block';  //设置样式
    }
  }
}

</script>

jquery实现导航栏的切换

相比较原生js，jq会简单很多，具体代码如下：

<style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background: wheat;
  }
  .box li{
    float: left;
    line-height: 30px;
    padding: 0 20px;
    cursor: pointer;
    margin-left: 50px;
    background: pink;
    list-style: none;
    border-bottom: 1px solid pink;
  }
  .box .cur{
    background: yellow;
    color: white;
  }
  .box ul{
    height: 50px;
  }
  .box .d{
    position: absolute;
    left: 0;
    top: 40px;
    width: 600px;
    height: 400px;
  }
</style>
<body>
  <div class="box" id="b">
    <ul>
      <li class="cur">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
     <div class="d" style="background: pink;"></div>
     <div class="d" style="background: yellow;"></div>
     <div class="d" style="background: blue;"></div>
     <div class="d" style="background: red;"></div>
     <div class="d" style="background: hotpink;"></div>
  </div>

  <script>
    // 下方展示下标为1的，其他的.d兄弟元素隐藏
    $('#b .d').eq(0).show().siblings('.d').hide();
    //点击标题，当前标题添加样式，其它兄弟元素取消样式  
    $('#b li').click(function(){
      $(this).addClass('cur').siblings().removeClass('cur');
      var i = $(this).index(); //点击当前元素的下标值
      $('#b .d').eq(i).show().siblings('.d').hide();
    });
  </script>

</body>