jQuery选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

初来乍到到

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏： jQ 文章标签：选项卡

本文链接：https://blog.youkuaiyun.com/weixin_43868692/article/details/98487413

jQ 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的选项卡功能实现，通过HTML和JavaScript配合使用，当点击列表项时，能够显示对应的内容并隐藏其他内容，利用jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      ul{
        width: 200px;
        margin-bottom: 200px;
      }
      ul li{
        float: left;
        list-style: none;
        margin-left: 20px;
      }
      .c{
        position: absolute;
        top: 20px;
        display: none;
      }
      .b{
        display:block
      }
    </style>
</head>
<body>
  
      <ul>
        <li class="a">01</li>
        <li class="a">02</li>
        <li class="a">03</li>
        <li class="a">04</li>
      </ul>
     
      <div class="c b">22</div>
      <div class="c">33</div>
      <div class="c">44</div>
      <div class="c">55</div>
</body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
 $('.a').click(function(){
  var Index = $(this).index()
  console.log(Index)
  $('.c').eq(Index).addClass('b').siblings().removeClass('b')
  //eq() 选择器选取带有指定 index 值的元素。
  //addClass() 添加类名 siblings()相邻元素 removeClass()删除类名
  // 总结：拿到index值，根据eq(index)来添加类名并删除相邻元素的类名
 })
</script>
</html>

注意：这个没有样式，只是实现选项卡功能