学做网站培训课程介绍

当前位置:

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>标签上方。
     
  3. 使用以下的代码对需要显示TAB菜单的版块进行对应的替换。
    <div class="”tab_box”">
    <div class="”lyz_tab_left”">
    <div class="”pro_con111″">
    <ul>
        <li id="”one1″" class="”hover”">公司简介</li>
        <li id="”one2″">服务理念</li>
        <li id="”one3″">服务流程</li>
        <li id="”one4″">服务标准</li>
        <li id="”one5″">服务资质</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 id="”con_one_1″" class="”hover”">公司简介内容</div>
    <div id="”con_one_2″" class="”hover”">服务理念内容</div>
    <div id="”con_one_3″" class="”hover”">服务流程内容</div>
    <div id="”con_one_4″" class="”hover”">服务标准内容</div>
    <div id="”con_one_5″" class="”hover”">服务资质内容</div>
    </div>
    <div class="”clear”"></div>
    </div>

相关功能制作

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 在做网站时,可以使用TAB菜单来展示很多版块的内容,当光标移向某一个选项时,就会显示相应的内容,再移到另一个栏目时就显示另一个版块的内容,这样
  • Dreamweaver跳转菜单制作 视频教程 (1123733 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 学习了一些HTML知识,我们就可以自己动手去写一些HTML代码了。那么用什么写了,这就要用HTML 编辑器。常用的HTML 编辑器有二种就是记事本和Dreamweave
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设