零基础学做网站教程

当前位置:

TAB竖向滑动菜单(JS+HTML)

在做网站时,可以使用TAB菜单来展示很多版块的内容,当光标移向某一个选项时,就会显示相应的内容,再移到另一个栏目时就显示另一个版块的内容,这样大大节省了网站的版面空间。
TAB竖向滑动菜单(JS+HTML)

方法/步骤

  1. 新建一个CSS文件,取名为tab.css,将以下的CSS代码复制到tab.css中,通过FTP工具将tab.css上传到自己网站的主题目录下
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    .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样式引用代码复制放到网站头部文件的</head>标签上方。
    
    
    1
    <link rel=”stylesheet” type=”text/css” href=”tab.css”>
  3. 使用以下的代码对需要显示TAB菜单的版块进行对应的替换。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <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)”>服务理念 </li>
    <li id=”one3″ onMouseOver=”setTab('one',3,5)”>服务流程</li>
    <li id=”one4″ onMouseOver=”setTab('one',4,5)”>服务标准</li>
    <li id=”one5″ onMouseOver=”setTab('one',5,5)”>服务资质</li>
    </ul>
    </div>
    <script language=”javascript”>
    <!–
    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″>公司简介内容</div>
    <div class=”hover” id=”con_one_2″ style=”display: none”>服务理念内容</div>
    <div class=”hover” id=”con_one_3″ style=”display: none”>服务流程内容</div>
    <div class=”hover” id=”con_one_4″ style=”display: none”>服务标准内容</div>
    <div class=”hover” id=”con_one_5″ style=”display: none”>服务资质内容</div>
    </div>
    <div class=”clear”></div>
    </div>

Tags:

, , , , ,

上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. [html教程] 第四课:HTML元素属性
  2. [HTML教程] 第三课:html 标签的特点及基本语法
  3. 第八课:wordpress导航菜单添加与设置
  4. DEDECMS织梦网站下拉菜单导航的制作
  5. 如何在网站上制作下拉菜单
  6. 网站tab切换菜单带内容向左滚动(自动调用网站内容)
  7. 网站好用的js框架有哪些,优缺点是什么
  8. dz论坛模板制作时DIY导致tab无法切换的解决方法
  9. wordpress网站提速之合并JS的方法
  10. 网站三级菜单、四级菜单制作(通用代码)