使用jQuery进行tab切换

<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>

.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;}

$("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"); ???})