零基础建站培训介绍

当前位置:

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

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

方法/步骤

  1. 新建一个CSS文件,取名为tab.css,将以下的CSS代码复制到tab.css中,通过FTP工具将tab.css上传到自己网站的主题目录下
    .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>标签上方。
    <link rel=”stylesheet” type=”text/css” href=”tab.css”>
  3. 使用以下的代码对需要显示TAB菜单的版块进行对应的替换。
    <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>
上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. wordpress下拉菜单,二级菜单制作
  2. [HTML教程] 第八课:HTML写书工具,HTML编辑器
  3. html5与html的区别有哪些
  4. 修改织梦dedecms后台左侧菜单类别与名称
  5. [HTML教程] 第一课:认识HTML,什么是html代码
  6. 如何制作JS+DIV左右滚动的切换图(手动+自动)
  7. 如何在网站上添加JS调用广告位
  8. 网站三级菜单、四级菜单制作(通用代码)
  9. 网站好用的js框架有哪些,优缺点是什么
  10. wordpress网站提速之合并JS的方法