使用jQuery进行tab切换

Posted 2020-11-18 zwjfrontend

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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>

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切换的主要内容，如果未能解决你的问题，请参考以下文章