中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

TAB豎向滑動菜單(JS+HTML)

2018-11-01    來源:學(xué)做網(wǎng)站論壇

容器云強勢上線!快速搭建集群,上萬Linux鏡像隨意使用

在做網(wǎng)站時,可以使用TAB菜單來展示很多版塊的內(nèi)容,當(dāng)光標(biāo)移向某一個選項時,就會顯示相應(yīng)的內(nèi)容,再移到另一個欄目時就顯示另一個版塊的內(nèi)容,這樣大大節(jié)省了網(wǎng)站的版面空間。
TAB豎向滑動菜單(JS+HTML)

方法/步驟

  1. 新建一個CSS文件,取名為tab.css,將以下的CSS代碼復(fù)制到tab.css中,通過FTP工具將tab.css上傳到自己網(wǎng)站的主題目錄下
    .tab_box {
    width:995px;
    margin:20px auto;
    }
    .lyz_tab_left {
    background:url(../images/left3.jpg) no-repeat top right;
    float: left;
    width: 259px;
    height: auto !important;
    min-height:500px;
    height:500px;
    }
    .pro_con1111 {
    float: left;
    overflow: hidden;
    width: 249px;
    height: auto;
    }
    .pro_con111 UL {
    padding: 0px;
    width: 259px;
    list-style-type: none;
    }
    .pro_con111 UL LI {
    padding-right: 30px;
    display: inline;
    font-weight: bold;
    font-size: 14px;
    background: url(../images/hongbj.jpg) no-repeat left center;
    float: left;
    margin-bottom: 5px;
    width: 219px;
    cursor: pointer;
    color: #fff;
    line-height: 34px;
    height: 34px;
    text-align: right;
    }
    .pro_con111 UL LI.hover {
    padding-right: 30px;
    display: inline;
    font-weight: bold;
    font-size: 14px;
    background: url(../images/baibj.jpg) no-repeat right 50%;
    float: left;
    margin-bottom: 5px;
    width: 229px;
    cursor: pointer;
    color: #3c3c3c;
    line-height: 34px;
    height: 34px;
    text-align: right;
    }
    .lyz_tab_right {
    padding-right: 10px;
    display: inline;
    padding-left: 20px;
    background: url(../images/right4.jpg) no-repeat left top;
    float: left;
    padding-bottom: 20px;
    width: 675px;
    padding-top: 20px;
    height:500px;
    }
    .clear {
    clear:both
    }
  2. 將以下的CSS樣式引用代碼復(fù)制放到網(wǎng)站頭部文件的</head>標(biāo)簽上方。
        <link href="”tab.css”" rel="”stylesheet”" type="”text/css”" />
  3. 使用以下的代碼對需要顯示TAB菜單的版塊進行對應(yīng)的替換。
    <div class="”tab_box”">
    <div class="”lyz_tab_left”">
    <div class="”pro_con111″">
    <ul>
        <li class="”hover”" id="”one1″" onmouseover="”setTab('one',1,5)”">公司簡介</li>
        <li id="”one2″" onmouseover="”setTab('one',2,5)”">服務(wù)理念</li>
        <li id="”one3″" onmouseover="”setTab('one',3,5)”">服務(wù)流程</li>
        <li id="”one4″" onmouseover="”setTab('one',4,5)”">服務(wù)標(biāo)準(zhǔn)</li>
        <li id="”one5″" onmouseover="”setTab('one',5,5)”">服務(wù)資質(zhì)</li>
    </ul>
    </div>
    <script type="text/javascript" language="”javascript”">// < ![CDATA[
    <!–
    function setTab(name,cursel,n){
    for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById(“con_”+name+”_”+i);
    menu.className=i==cursel?”hover”:””;
    con.style.display=i==cursel?”block”:”none”;
    }
    }
    //–>
    // ]]></script>

    </div>
    <div class="”lyz_tab_right”">
    <div class="”hover”" id="”con_one_1″">公司簡介內(nèi)容</div>
    <div class="”hover”" id="”con_one_2″">服務(wù)理念內(nèi)容</div>
    <div class="”hover”" id="”con_one_3″">服務(wù)流程內(nèi)容</div>
    <div class="”hover”" id="”con_one_4″">服務(wù)標(biāo)準(zhǔn)內(nèi)容</div>
    <div class="”hover”" id="”con_one_5″">服務(wù)資質(zhì)內(nèi)容</div>
    </div>
    <div class="”clear”"></div>
    </div>

相關(guān)功能制作

  • 如何自己制作TAB選項卡
  • 制作鼠標(biāo)經(jīng)過時TAB菜單切換javascript特效
  • JS實現(xiàn)Tab菜單滾動切換的方法

標(biāo)簽: isp seo 代碼

版權(quán)申明:本站文章部分自網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系:west999com@outlook.com
特別注意:本站所有轉(zhuǎn)載文章言論不代表本站觀點!
本站所提供的圖片等素材,版權(quán)歸原作者所有,如需使用,請與原作者聯(lián)系。

上一篇:圖片與文字混排對齊CSS樣式【vertical-align屬性】

下一篇:css選擇器種類及優(yōu)先級順序