选项卡

常见选项卡之一：

html:　

　　<button class="b">1</button>
　　<button>2</button>
　　<button>3</button>
　　<button>4</button>
　　<div class="active">1111</div>
　　<div>2222</div>
　　<div>3333</div>
　　<div>4444</div>

css:

　　* {
　　　　margin:0;
　　　　padding:0;
　　}
　　button {
　　　　width:50px;
　　　　height:50px;
　　　　background:#ccc;
　　}
　　div {
　　　　width:200px;
　　　　height:200px;
　　　　border:1px solid black;
　　　　display:none;
　　}
　　.b {
　　　　background:red;
　　}
　　div.active {
　　　　display:block;
　　}

js:

　　$('button').click(function() {
　　　　var index = $('button').index(this);
　　　　$(this).addClass('b').siblings().removeClass('b');
　　　　$('div').eq(index).addClass('active').siblings().removeClass('active');
　　})

转载于:https://www.cnblogs.com/xiaofang-FE/p/6829716.html