js实现简单导航切换

最新推荐文章于 2023-02-25 18:30:51 发布

viser123

最新推荐文章于 2023-02-25 18:30:51 发布

阅读量2.1k

点赞数

分类专栏：移动端文章标签： js web前端

本文链接：https://blog.csdn.net/viser123/article/details/50677078

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      list-style: none;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
    }

    ul li {
      float: left;
    }
    #t1,#t2,#t3 {
      clear: both;
      width: 300px;
      height: 300px;
      border:1px solid purple;
    }

    .active {
      background-color: #0088cc;
    }

    .hehe {
    display: none;
    }

    .hihi {
      display: block;
    }
    #t1 {
      background-color: red;
      /*display: block;*/
    }
    #t2 {
      background-color: blue;
    }
    #t3 {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="javascript:;" target="t1">第一个</a></li>
    <li><a href="javascript:;" target="t2">第二个</a></li>
    <li><a href="javascript:;" target="t3">第三个</a></li>
  </ul>
  <div id="t1" class="hehe hihi">

  </div>
  <div id="t2" class="hehe">

  </div>
  <div id="t3" class="hehe">

  </div>
  <script src="assets/global/plugins/jquery.min.js" ></script>
  <script>
    $(function(){
        $("ul>li").click(function(){
        $("ul>li").removeClass("active");
        $(this).addClass("active");
        var src=event.target;//get a
        var href=$(src).attr("target");//get t
        var dd="#"+href; //get id
        console.log(dd);
        $('div').removeClass("hihi");
        $("div").addClass("hehe");
        $(dd).removeClass("hehe");
      });
    });
  </script>
</body>
</html>

viser123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现简单导航切换

html>lang="en"> charset="UTF-8"> * { list-style: none; box-sizing: border-box; } a { text-decoration: none; } ul li { float: left; } #t1
复制链接

扫一扫