简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 27
2021年 情人节 29
2021年 元宵节 41
2022年 元 旦 350
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现网页tab栏效果制作

    内容摘要: !DOCTYPE htmlhtml lang='zh-CN'headmeta charset='UTF-8'meta name='viewport' content='width=device-width, initial-scale=1.0'titletab栏切换操作/titlestyle * { margin: 0; padding: 0; box-si......

      <!DOCTYPE html>

    <html lang="zh-CN">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>tab栏切换操作</title>


    <style>

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    .tab {

    margin: 100px auto;

    width: 1200px;

    height: 330px;

    background-color: royalblue;

    }

    .tab .tab_list {

    height: 30px;

    background-color: slategrey;

    }

    .tab ul li{

    float: left;

    list-style: none;

    cursor: pointer;

    width: 100px;

    height: 30px;

    }

    .color {

    background-color: red;

    }

    .tab .tab_con {

    height: 300px;

    background-color: silver;

    }

    </style>

    </head>

    <body>

    <div class = "tab">

    <div class="tab_list">

    <ul>

    <li class = "color">商品介绍</li>

    <li>规格与包装</li>

    <li>售后保障</li>

    <li>商品评价</li>

    <li>手机社区</li>

    </ul>

    </div>

    <div class="tab_con">

    <div class="item" style="display:block;">商品介绍</div>

    <div class="item" style="display: none;">规格与包装</div>

    <div class="item" style="display: none;">售后保障</div>

    <div class="item" style="display: none;">商品评价</div>

    <div class="item" style="display: none;">手机社区</div>


    </div>

    </div>


    <script>

    var tab_list = document.querySelector('.tab_list');

    var lis = tab_list.querySelectorAll('li');

    var items = document.querySelectorAll('.item');

    for(var i = 0;i<lis.length;i++){

    //给所有的li添加自定义属性索引号

    lis[i].setAttribute('index',i)

    //设置鼠标点击事件

    lis[i].onclick = function(){

    for( var i = 0;i<lis.length;i++){

    //将所有类的类名设置为空

    lis[i].className='';

    //将所有的display设置为none

    items[i].style.display='none';

    }

    //给点击事件的类名设置为color

    this.className='color';

    //获取点击事件的索引号

    var index = this.getAttribute('index');

    // for (var i=0;i<items.length;i++){

    // items[i].style.display='none';

    // }

    //将点击事件的display设置为block

    items[index].style.display = 'block';

    }

    }

    </script>

    </body>

    </html>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/11/20 发布时间:16:30:01 点击:383 录入:齐天大圣
  • 上一篇:js 取时间差去掉周六周日实现代码
  • 下一篇:原生js实现弹窗消息动画
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.88 Build 20.12.22(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021