PHP+jQuery实现顶部tab选项卡

使用PHP+jQuery实现一个简单的顶部tab选项卡，实现不同内容之间的点击切换，适合前后端不分离的PHP页面

 

PHP

$ProType = empty($_REQUEST["ProType"]) ? 1 : $_REQUEST["ProType"];

 

html

<div style="display: flex;flex-direction: column;background-color: white;">

    <div style="display: flex;justify-content: space-around;border-top: 1px solid #dadada;padding: 2vw 0;color: #a8a8a8;">
        <a href="?ProType=1" id="allRank" class=" <?php if ($ProType==1){echo 'titles';} ?> rank" style="border-right: 1px solid #dadada;">
            <div  >
                综合
            </div>
        </a>
        <a href="?ProType=2" id="saleNumRank" class=" <?php if ($ProType==2){echo 'titles';} ?> rank" >
            <div >
                价格
            </div>
        </a>
        <a href="?ProType=3" id="priceRank" class=" <?php if ($ProType==3){echo 'titles';} ?> rank" style="border-left: 1px solid #dadada;">
            <div >
                销量
            </div>
        </a>
    </div>

</div>

<div style="display: flex;width:98vw;margin:0 auto;margin-top:4vw;text-align: center;flex-wrap: wrap;justify-content: space-around;">
    //显示页面，在此填入需要显示的内容
</div>

 

css

    .rank{
        width:33.3%;
        text-align: center;
        color: black;
        text-decoration: none;
    }

    .titles{
        color: #ff6d27;
    }

 

jQuery

    $('#allRank').click(function () {
        $('#allRank').addClass('titles');
        $('#saleNumRank').removeClass('titles');
        $('#priceRank').removeClass('titles');
    })
    $('#saleNumRank').click(function () {
        $('#allRank').removeClass('titles');
        $('#saleNumRank').addClass('titles');
        $('#priceRank').removeClass('titles');
    })
    $('#priceRank').click(function () {
        $('#allRank').removeClass('titles');
        $('#saleNumRank').removeClass('titles');
        $('#priceRank').addClass('titles');
    })

 

最终效果如下