利用jQuery實(shí)現(xiàn)Tab選項(xiàng)卡

發(fā)布時(shí)間：2020-07-03 12:42:50 來源：網(wǎng)絡(luò) 閱讀：602 作者：歆冉欄目：web開發(fā)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            font-family: 微軟雅黑;
        }
        .menu{
            height: 50px;
            background: #272822;
        }
        .menu a{
            display: block;
            height: 50px;
            width: 80px;
            color: #fff;
            float: left;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
            /*border: 1px solid red;*/
            text-align: center;
        }
        .menu a:first-child{
            background: #888;
        }
        .info{
            height: 200px;
            color: #fff;
            background: #888;
            overflow: hidden;
        }
        .info p{
            padding: 20px;
            line-height: 30px;
            display: none;
        }
        .info p:first-child{
            display: block;     //  把第一個(gè)進(jìn)行顯示出來
        }
    </style>
    <script src="jquery-1.8.3.js"></script>
</head>
<body>
    <div class="menu">
        <a href="">html</a>
        <a href="">js</a>
        <a href="">jQuery</a>
    </div>
    <div class="info">
        <p>html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言html 是一門語言</p>

        <p>js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言js 是一門語言</p>

        <p>jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言jQuery 是一門語言</p>
    </div>
</body>
<script type="text/javascript">
$('.menu a').mouseover(function(){
    // 讓其他的a標(biāo)簽的背景顏色都去掉
    $('.menu a').css({'background':'#272822'});
    // 把當(dāng)前的a標(biāo)簽的背景顏色改變
    $(this).css({'background':'#888'});
    //獲取索引
    index=$(this).index('.menu a');   
    // 隱藏掉所有的p標(biāo)簽
    $('.info p').hide();
    // 顯示出當(dāng)前的p標(biāo)簽
    $('.info p').eq(index).show();   

});
</script>
</html>
向AI問一下細(xì)節(jié)
利用jQuery實(shí)現(xiàn)Tab選項(xiàng)卡

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
