jquery选项卡

夜晚收集者

于 2020-12-22 09:58:05 发布

阅读量250

点赞数

分类专栏： jQuery 前端文章标签： html

本文链接：https://blog.csdn.net/weixin_45541388/article/details/111505766

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

html代码：

<div class="apply-record">
    <ul class="tab">
          <li class="tab-item active">页面一</li>
          <li class="tab-item">页面二</li>
          <li class="tab-item">页面三</li>
    </ul>
    <div class="content products">
          <div class="mainCont selected">
              页面一
          </div>   
          <div class="mainCont">
               页面二
          </div>                   
          <div class="mainCont">
               页面三
          </div>
    </div>
</div>

js逻辑：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
   $(function() {
      $(".apply-record .tab .tab-item").click(function() {
      $(this).addClass("active").siblings().removeClass("active");                     
      $(".products.mainCont").eq($(this).index()).show().siblings().hide();
   })
})
</script>

css样式：

<style type="text/css">
    .apply-record{
        width: 400px;
     }
    .apply-record .tab{
        height:60px;
        line-height:60px;				
     }
     .apply-record .tab .tab-item{
        list-style:none;
        display:inline-block;
        width:100px;
        text-align:center;
        font-size:20px;
     }
     .apply-record .tab .tab-item.active{
         color: #3F86FF;
         border-bottom: 3px solid #0000FF;
     }			
     .products .mainCont { 
         display: none; 
         width:100%;
         overflow: auto;
         text-align: center;
     } 
     .products .mainCont.selected {
         display: block; 
     } 
</style>