[js] 第140天 说说用原生js实现封装一个选项卡的功能 #1146
Labels
js
JavaScript
Comments
|
通过点击标签来切换选项页面的显示隐藏达成选项卡的效果 |
haizhilin2013
changed the title
Tab栏切换(重点)这是一个重点案例，是前端人员的必备技能！！你必须要把这个案例给写会！！！！
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
lis[i].onclick = function(){
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
}
this.className = 'current';
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
/*这个是最大的盒子*/
width: 978px;
margin: 100px auto;
}
/*大盒子里的上盒子*/
.tab_list {
/*没给宽，默认和父亲一样宽*/
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item {
/*也不保留位置*/
display: none;
}
</style>
</head>
<body>
<!--大盒子叫tab,里面有上下2个盒子，一个叫tab_list，一个叫tab_con-->
<!--tab_list里面有5个li-->
<!--tab_con里面有5个div-->
<!--5个li和5个div是一一对应的关系-->
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<!-- block除了有转为块级元素以外，还有显示的意思 -->
<!-- 行内元素层级高，把上面的display:none给覆盖了 -->
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//1. 上的模块选项卡:点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
// 获取元素
var tab_list = document.querySelector('.tab_list');
/*5个li对应的是5个item*/
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//里面有5个小li,必定要用循环
//for循环绑定点击事件
for(var i = 0; i < lis.length; i++){
//开始给5个小li设置一个自定义属性：索引号index
lis[i].setAttribute('index',i)
//所有的孩子都要有onclick绑定事件
lis[i].onclick = function(){
//排他思想：干掉所有人，其余的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 j = 0; j < items.length; j++){
items[j].style.display = 'none';
}
//留下我自己 让对应的item显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab</title>
</head>
<body>
<div id="tab-box">
</div>
<div id="text-box">
</div>
</body>
<script>
var data = [
{
title: '首页',
text: `
<ul>
<li>王者荣耀怎么氪金最具性价比</li>
<li>如何评价《赘婿》大结局</li>
<li>如何评价格里芬被活塞买断</li>
</ul>
`
},
{
title: '视频',
text: `
<video autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
`
},
{
title: '消息',
text: `
哈哈哈哈, 我懒得写了
`
}
];
var tabBoxEl = document.getElementById('tab-box'),
textBoxEl = document.getElementById('text-box');
var hash = location.hash ? location.hash.substring(1) : 0;
data.forEach(({ title, text }, index) => {
var tabEl = document.createElement('button');
tabEl.innerText = title;
tabEl.onclick = function () {
textBoxEl.innerHTML = text;
location.hash = index;
};
tabBoxEl.appendChild(tabEl);
index == hash && tabEl.click();
});
</script>
</html> |
|
说下思路吧： 定义一个tab组件，里面有4个选项，每次点击一个选项，该选项卡会新增选中样式的class突出该选中效果利用dom.classList.add('active')，其余选项卡如果之前有被选中过需清除该class利用dom.classList.remove('active')，然后根据选中的选项卡显示当前需展示的内容块 利用display属性。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
第140天 说说用原生js实现封装一个选项卡的功能
The text was updated successfully, but these errors were encountered: