前端入门经验——tab切换

最新推荐文章于 2024-06-14 22:08:10 发布

larica

最新推荐文章于 2024-06-14 22:08:10 发布

阅读量242

点赞数

分类专栏：前端入门经验文章标签： html

本文链接：https://blog.csdn.net/qq_45997679/article/details/108112059

版权

前端入门经验专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html代码

<body>
    <ul>
        <li>我</li>
        <li>爱</li>
        <li>中</li>
        <li class="li-sum">国</li>
    </ul>
    <div class="demo">
        <div class="test1">这是第一个</div>
        <div class="test2">这是第二个</div>
        <div class="test3">这是第三个</div>
        <div class="test4">这是第四个</div>
    </div>
</body>

css代码

<style>
   body {
       margin: 0px;
       font-size: 0px;
   }
   
   li {
       list-style: none;
       display: inline-block;
       width: 100px;
       height: 40px;
       background-color: pink;
       font-size: 20px;
       text-align: center;
       line-height: 40px;
       border-right: 1px solid black;
   }
   
   .li-sum {
       background-color: red;
   }
   
   .demo {
       width: 400px;
       height: 300px;
       border: aqua 1px solid;
       margin-left: 40px;
       font-size: 14px;
   }
   
   .test1 {
       display: none;
   }
   
   .test2 {
       display: none;
   }
   
   .test3 {
       display: none;
   }
</style>

<script>
   $('li').click(function() {
       var index = $(this).index();
       $(this).addClass('li-sum').siblings().removeClass('li-sum');
       $(".demo>div").eq(index).show().siblings().hide();
   });
</script>