jquery超简易选项卡切换效果

最新推荐文章于 2020-12-24 12:24:58 发布

泡泡菌

最新推荐文章于 2020-12-24 12:24:58 发布

阅读量527

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/Junpaopao/article/details/78022487

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、Html部分

<div class="mainContent">
    <div class="smallChart">
        <h2 class="selected">1</h2>
        <h2>2</h2>
        <h2>3</h2>
        <h2>4</h2>
        <h2>5</h2>
    </div>
    <div class="bigChart">
        <div id="chart1" class="chart show"></div>
        <div id="chart2" class="chart"></div>
        <div id="chart3" class="chart"></div>
        <div id="chart4" class="chart">4</div>
        <div id="chart5" class="chart">5</div>
    </div>
</div>

2、less部分

.mainContent{
  margin-top:60px;
  padding-bottom: 100px;
  /*height: 120%;*/
  margin-left: 200px;
  //background: #2aabd2;
  .smallChart{
    overflow: hidden;
    width: 100%;
    h2{
      width: 20%;
      height:100px;
      float: left;
      text-align: center;
    }
    .selected{
      background-color: cornflowerblue;
    }
  }
  .bigChart{
    width: 100%;
    .chart{
      display: none;
      width:1000px;
      height:400px;
    }
    .show{
      display: block;
    }
  }
}

3、js部分

function cutover(){
    $(".smallChart>h2").click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
        var index=$(this).index();
        $(".bigChart>.chart").eq(index).addClass("show").siblings().removeClass("show");
    });
}