课程咨询 :0551-64632511 QQ:2146233496

合肥web前端培训

合肥web培训 > 达内新闻 > 如何切换TAB的代码实例
  • 如何切换TAB的代码实例

    发布:合肥web培训      来源:达内新闻      时间:2016-06-06

  • 合肥web培训专家引用一个实例,讲解如何轻松切换tab。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>测试</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="reset.css">
    <style>
    body{padding-top: 30px;}

    head{overflow: hidden; margin:0 auto; width: 600px;}
     
    #head span{width: 198px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #000; float: left; font-size: 24px; cursor: pointer;}
    #head span:hover{color: red;}
    #content{width: 598px; height: 238px; border: 1px solid #000; margin:0 auto; overflow: hidden;}
    #content li{width: 598px; height: 238px; line-height: 238px; text-align: center; font-size: 60px; display: none;}
    /*当前显示样式*/
    #head .select{background: #ccc;}
    #content .show{display: block;}</style>
    </head>
    <body>
    <h2 id="head">
    <span class="select">标题1</span>
    <span>标题2</span>
    <span>标题3</span>
    <span>标题4</span>
    <span>标题5</span>
    </h2>
    <ul id="content">
    <li class="show">内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    </ul>
    </body>
    <script>
    var spans=document.getElementsByTagName('span');
    var lis=document.getElementsByTagName('li');
    //给所有的标题绑定一个点击事件
    for (var i = 0; i < spans.length; i++) {
    spans[i].a=i;//为每一标题保存一个下标
    spans[i].onclick=function (){
    for (var v = 0; v < spans.length; v++) {
    spans[v].className='';
    lis[v].className='';
    };
    //alert(this.index);
    spans[this.a].className='select';
    lis[this.a].className='show';
    }
    };
    </script>
    </html>

    推荐文章

上一篇:web前端开发冷知识

下一篇:网页布局基础知识

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56