Web-api学习 14:classList属性

classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持

该属性用于在元素中添加,移除及切换 CSS 类。有以下方法

添加类:

element.classList.add(’类名’);

 focus.classList.add('current');

移除类:

element.classList.remove(’类名’);

focus.classList.remove('current');

切换类:

element.classList.toggle(’类名’);

focus.classList.toggle('current');

注意:以上方法里面,所有类名都不带点


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. HTML结构 ```html <div class="tab-container"> <div class="tab-nav"> <a href="#" data-tab="tab1" class="active">Tab 1</a> <a href="#" data-tab="tab2">Tab 2</a> <a href="#" data-tab="tab3">Tab 3</a> </div> <div class="tab-content"> <div id="tab1" class="tab-panel active">Tab 1 Content</div> <div id="tab2" class="tab-panel">Tab 2 Content</div> <div id="tab3" class="tab-panel">Tab 3 Content</div> </div> </div> ``` 2. CSS样式 ```css .tab-container { display: flex; flex-direction: column; margin: 20px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .tab-nav { display: flex; } .tab-nav a { padding: 10px; text-decoration: none; color: #333; background-color: #f7f7f7; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; cursor: pointer; } .tab-nav a.active { background-color: #fff; border-bottom: 1px solid #fff; } .tab-content { padding: 10px; } .tab-panel { display: none; } .tab-panel.active { display: block; } ``` 3. JavaScript代码 ```javascript const tabs = document.querySelectorAll('.tab-nav a'); const panels = document.querySelectorAll('.tab-panel'); tabs.forEach(tab => { tab.addEventListener('click', e => { e.preventDefault(); const tabId = tab.getAttribute('data-tab'); tabs.forEach(tab => tab.classList.remove('active')); panels.forEach(panel => panel.classList.remove('active')); tab.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); ``` 4. 解释 - 首先,我们使用`querySelectorAll`方法获取所有的tab标签和panel标签。 - 然后,我们遍历每个tab标签,并为其添加一个`click`事件监听器。 - 当某个tab被点击时,我们获取其`data-tab`属性值,以便找到对应的panel标签。 - 然后,我们将所有的tab标签和panel标签的`active`类都移除。 - 最后,我们给当前被点击的tab标签和对应的panel标签添加`active`类,以便显示它们。 这样,我们就完成了一个简单的tab栏切换功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值