使用jQuery進行tab切換
阿新 • • 發佈：2018-06-17
val 經典 img code foo tdi ML AS bsp
HTML：
<div class="food"> <div class="tabsdiv"> <ul> <li class="tabsli select1">全部菜品</li> <li class="tabsli">經典牛排</li> <li class="tabsli">意面/燴飯</li> <li class="tabsli">風味披薩</li> <li class="tabsli">甜品小食</li> <li class="tabsli">酒水飲料</li> <li class="tabsli">其他</li> </ul> <div id="inputdiv"> <input id="text" type="text" value="輸入關鍵字"> <input id="input_button" type="button" value="搜索"> </div> </div> <div class="food_content"> <div class="table-pic table-show clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic1.jpg"alt="" /> </span> <h2 class="ms-tit">海鮮芝士大蝦</h2> <p class="ms-txt">價格：49元</p> </a> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic2.jpg" alt="" /> </span> <h2 class="ms-tit">草莓布丁杯</h2> <p class="ms-txt">價格：12元</p> </a> <a href="meishi-con.html" class="ms-wrap"> <span class="ms-pic"> <img src="img/ms-pic3.jpg" alt="" /> </span> <h2 class="ms-tit">菲力黑椒牛排</h2> <p class="ms-txt">價格：69元</p> </a> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic4.jpg" alt="" /> </span> <h2 class="ms-tit">香煎排意面</h2> <p class="ms-txt">價格：69元</p> </a> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic5.jpg" alt="" /> </span> <h2 class="ms-tit">鮮香培根比薩</h2> <p class="ms-txt">價格：59元/24寸</p> </a> <a href="meishi-con.html" class="ms-wrap"> <span class="ms-pic"> <img src="img/ms-pic6.jpg" alt="" /> </span> <h2 class="ms-tit">番茄燴意面</h2> <p class="ms-txt">價格：39元</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap"> <span class="ms-pic"> <img src="img/ms-pic3.jpg" alt="" /> </span> <h2 class="ms-tit">菲力黑椒牛排</h2> <p class="ms-txt">價格：69元</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic4.jpg" alt="" /> </span> <h2 class="ms-tit">香煎排意面</h2> <p class="ms-txt">價格：69元</p> </a> <a href="meishi-con.html" class="ms-wrap"> <span class="ms-pic"> <img src="img/ms-pic6.jpg" alt="" /> </span> <h2 class="ms-tit">番茄燴意面</h2> <p class="ms-txt">價格：39元</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic5.jpg" alt="" /> </span> <h2 class="ms-tit">鮮香培根比薩</h2> <p class="ms-txt">價格：59元/24寸</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic2.jpg" alt="" /> </span> <h2 class="ms-tit">草莓布丁杯</h2> <p class="ms-txt">價格：12元</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic2.jpg" alt="" /> </span> <h2 class="ms-tit">草莓布丁杯</h2> <p class="ms-txt">價格：12元</p> </a> </div> <div class="table-pic clearfix"> <a href="meishi-con.html" class="ms-wrap ms-right"> <span class="ms-pic"> <img src="img/ms-pic1.jpg" alt="" /> </span> <h2 class="ms-tit">海鮮芝士大蝦</h2> <p class="ms-txt">價格：49元</p> </a> </div> </div> </div>
CSS：
.food{ width: 1080px; margin: 60px auto 0 auto; } .food ul{ float: left; } .tabsli{ float: left; color: #666666; font-size: 16px; width: 100px; text-align: center; padding: 10px 0 10px 0; } .tabsli:hover{ text-decoration: none; background-color: #533336; color: #fff; } #inputdiv{ border: 1px solid #533336; float: right; display: inline-block; height: 40px; width: 292px; padding-left: 16px; border-radius: 20px; overflow: hidden; } #text{ width: 194px; height: 46px; line-height: 46px; font-size: 18px; color: gray; border: none; outline: none; } #input_button{ width: 100px; line-height: 46px; margin-right: -10px; background-color: #533336; color: #fff; font-size: 18px; cursor: pointer; border: none; outline: none; } .food_content{ border-top: 1px solid #533336; clear: both; } .table-pic{ width: 1080px; margin: 0 auto; display: none; } .table-show{ display: block; } .ms-wrap{ float: left; text-align: center; margin-top: 60px; } .ms-right{ margin-right: 30px; } .ms-tit{ font-size: 24px; color: #533336; line-height: 40px; } .ms-txt{ font-size: 18px; color: #999; } .mei-wrap{ margin-top: 30px; width: 1080px; margin: 0 auto; text-align: center; } .mei-tit{ line-height: 80px; font-size: 30px; } .mei-pic,.mei-txt{ text-align: left; width: 1080px; margin: 0 auto; } .mei-txt{ margin-top: 40px; text-indent: 2em; font-size: 18px; line-height: 30px; } .select1 { text-decoration: none; background-color: #533336; color: #fff; }
JQ：
$("li.tabsli").click(function () {
var index = $(this).index();
$(this).parent().parent().next().find(".table-pic").removeClass("table-show").eq(index).addClass("table-show");
$(this).addClass("select1").siblings().removeClass("select1");
})
使用jQuery進行tab切換