使用前
/* tab(boxId, boxWidth, tabList) 参数说明: *boxId:需要做选项卡的盒子的ID名字, *boxWidth:盒子的宽度,高度自适应; *tabList:选项卡的选项。 *本插件的选项是通过渲染的方式生成的。 *盒子需要复制。 *第n个选项卡 */ /* 此插件的使用, 第一步:复制html结构,注意选项和盒子数量要相互匹配 第二步:复制样式代 第三步:引入js(插件)调用即可,tab()。 */
实例:
第一步:先引入js(插件)
第二步:tab(‘box2’, ‘350’, [‘选项1’, ‘选项2’, ‘选项3’,‘1’); 调用
第三步:复制结构。<div class="silde_nav"></div> <div class="boxCon" style="display: block;"> <p>盒子1</p> </div> <div class="boxCon"> <p>盒子2</p> </div> <div class="boxCon"> <p>盒子3</p> </div>
此选项卡是文档中的第一个选项卡,有三个选项,因此留三个盒子。再复制样式即可。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡(tab切换)</title>
<link rel="stylesheet" href="../css/tab.css">
</head>
<body>
<div id="box">
<div id="box2">
<div class="silde_nav">
<!-- <li class="navlist"><a href="###">精选</a></li>
<li><a href="###">社会</a></li>
<li><a href="###">娱乐</a></li>
<li><a href="###">生活</a></li>
<li><a href="###">体育</a></li> -->
</div>
<div class="boxCon" style="display: block;">
<p>盒子1</p>
</div>
<div class="boxCon">
<p>盒子2</p>
</div>
<div class="boxCon">
<p>盒子3</p>
</div>
<div class="boxCon">
<p>盒子4</p>
</div>
<div class="boxCon">
<p>盒子5</p>
</div>
</div>
</div>
</body>
</html>
<script src="../js/tab.js"></script>
<script>
tab('box2', '350', ['选项1', '选项2', '选项3', '选项4', '选项5'], '1');
/*
tab(boxId, boxWidth, tabList)
参数说明:
*boxId:需要做选项卡的盒子的ID名字,
*boxWidth:盒子的宽度,高度自适应;
*tabList:选项卡的选项。
*第n个选项卡
*/
/*
此插件的使用,
第一步:复制html结构,
第二步:复制样式代
第三步:引入js(插件)调用即可,tab()。
*/
</script>
tab.js
function tab(boxId, boxWidth, tabList, n) {
//参数部分
let box2 = document.getElementById(boxId);
let ttList = tabList; //各选项
let lw = boxWidth; //盒子width
box2.style.width = lw + 'px';
let silde_nav = document.getElementsByClassName('silde_nav')[n - 1];
// console.log(silde_nav);
let html = '';
for (let i = 0; i < ttList.length; i++) {
html += `<li style="width:${(lw - 2) / ttList.length + 'px'}"><a href="###">${ttList[i]}</a></li>`;
}
silde_nav.innerHTML = html; //渲染选项
// let aList = silde_nav.getElementsByTagName('li'); //d读取到选项卡
let cons = box2.getElementsByClassName('boxCon'); //内容
let btns = silde_nav.getElementsByTagName('li'); //菜单栏
// console.log(btns);
for (let i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function () {
for (let j = 0; j < btns.length; j++) {
btns[j].className = '';
cons[j].style.display = 'none';
}
this.className = 'navlist';
cons[this.index].style.display s= 'block';
}
}
}
tab.css
html,
body {
width: 100%;
height: 100%;
}
ul,
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#box {
width: 400px;
}
#box2 {
border: 1px solid #cacaca;
}
.boxCon {
display: none;
}
.silde_nav {
width: 100%;
height: 44px;
}
.silde_nav li {
height: 100%;
float: left;
position: relative;
}
.silde_nav li a {
display: block;
box-sizing: content-box;
position: absolute;
bottom: 0px;
height: 42px;
line-height: 42px;
}
.silde_nav li a:hover {
color: #0aa770;
}
.navlist a {
color: #0aa770;
border-top: 2px solid #0aa770;
}
p {
width: 100%;
height: 200px;
font-size: 30px;
line-height: 200px;
text-align: center;
border: 1px solid #0aa770;
}