js tab栏(导航栏)点击切换样式效果和内容改变

刚开始打算用css效果解决  结果发现鼠标点击之后样式就没了

<div class="tab_list">
     <ul>
         <li class="current">头部1</li>
         <li>头部2</li>
      </ul>
</div>
<div class="item" style="display: block;">内容1</div>
<div class="item">内容2</div>

<style>
.tab_list {
    height: 40px;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

.tab_list li {
    align-items: center;
    border: 0 none;
    border-radius: 16px;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: .03em;
    line-height: 1;
    opacity: 1;
    outline: 0 none currentcolor;
    transition: background-color .2s ease 0s, opacity .2s ease 0s;
    height: 32px;
    padding: 0 16px;
    color: rgb(101, 8, 124);
}

.tab_list .current {
    box-shadow: inset 0 -1px 0 0 rgba(35, 35, 78, 0.4);
    background-color: #9238a1;
    color: #da2fa6;
    border-radius: 20px;
}

.item_info {
    padding: 20px 0 0 20px;
}

.item {
    display: none; // 重点
}

</style>
<scrip>
// 获取元素
var lis = document.querySelectorAll('.tab_list li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
    // 开始给5个小li 设置索引号 
    lis[i].setAttribute('index', i);
    lis[i].onclick = function() {
        // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
        // 干掉所有人 其余的li清除 class 这个类
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        // 留下我自己 
        this.className = 'current';
        // 2. 下面的显示内容模块
        var index = this.getAttribute('index');
        console.log(index);
        // 干掉所有人 让其余的item 这些div 隐藏
        for (var i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        // 留下我自己 让对应的item 显示出来
        items[index].style.display = 'block';
    }
}
</script>

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jQuery来实现一个简单的tab切换。下面是一个示例代码: HTML: ```html <div class="tab-wrapper"> <ul class="tab-nav"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane">Tab 1 Content</div> <div id="tab2" class="tab-pane">Tab 2 Content</div> <div id="tab3" class="tab-pane">Tab 3 Content</div> </div> </div> ``` CSS: ```css .tab-nav li { display: inline-block; margin-right: 10px; } .tab-nav li a { display: block; padding: 5px; background-color: #eee; border: 1px solid #ccc; text-decoration: none; color: #333; } .tab-nav li.active a { background-color: #fff; border-bottom-color: transparent; } .tab-content .tab-pane { display: none; } .tab-content .active { display: block; } ``` JavaScript: ```javascript $(document).ready(function() { $('.tab-nav li:first-child').addClass('active'); $('.tab-content .tab-pane:first-child').addClass('active'); $('.tab-nav li a').click(function() { var tab_id = $(this).attr('href'); $('.tab-nav li').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $(this).parent().addClass('active'); $(tab_id).addClass('active'); return false; }); }); ``` 首先,给每个tab页一个唯一的id,然后使用CSS来设置样式。JavaScript代码中,我们给第一个tab页和tab导航的第一个选项添加active类。然后,当点tab导航的某一项时,我们首先移除所有的active类,然后给被点导航项和对应的tab页添加active类。最后,返回false以阻止默认链接行为。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值