用原生js進行封裝函式 實現 選項卡巢狀選項卡 功能
效果如圖:
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<style type="text/css">
body,
ul,
li,
div {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 900px;
margin: 0 auto;
border: 1px solid #CCCCCC;
height: 308px;
overflow: hidden;
}
#ul1 {
width: 200px;
float: left;
background: #CCCCCC;
height: 308px;
}
#ul1 li {
height: 77px;
line-height: 76px;
text-align: center;
font-size: 15px;
border-bottom: 1px solid #9ACD32;
}
#ul1 li.on {
background: #fff;
color: #000000;
}
.box div {
width: 700px;
float: right;
position: relative;
height: 308px;
}
.box div img {
width: 100%;
height: 308px;
}
.box div ul {
width: 100%;
height: 30px;
position: absolute;
left: 0px;
bottom: 0px;
}
.box div li {
float: left;
margin-right: 1px;
cursor: pointer;
background: #9ACD32;
line-height: 30px;
font-size: 12px;
text-align: center;
height: 40px;
}
.box div li.on {
background: pink;
}
</style>
</body>
</head>
<body>
<div class="box" id="box">
<ul id='ul1'>
<li class="on">最新團購</li>
<li>商品特惠</li>
<li>名品推薦</li>
<li>繽紛活動</li>
</ul>
<div>
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
</ul>
</div>
<div>
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
</ul>
</div>
<div>
<img src="img/8.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
</ul>
</div>
<div>
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/8.jpg">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
</ul>
</div>
</div>
<script type="text/javascript">
var oBox=document.getElementById("box")
var oUl1=document.getElementById("ul1")
var oLi=oUl1.getElementsByTagName("li")
var oDiv=oBox.getElementsByTagName("div")
//封裝函式begin
for (var i=0;i<oDiv.length;i++) {
fn(oDiv[i])
}
function fn(ojbk){
var oImg=ojbk.getElementsByTagName("img")
var oUl=ojbk.getElementsByTagName("ul")[0]
var aLi=ojbk.getElementsByTagName("li")
//左邊選項卡begin
for (var i=0;i<oLi.length;i++) {
oLi[i].index=i
oLi[i].onclick=function(){
for(var i=0;i<oDiv.length;i++){
oLi[i].className=""
oDiv[i].style.display="none"
}
this.className="on"
oDiv[this.index].style.display="block"
}
}
//左邊選項卡end
//下邊選項卡begin
aLi[0].className="on"
for(var i=0;i<oImg.length;i++){
aLi[i].index=i
aLi[i].onclick=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className=""
oImg[i].style.display="none"
}
this.className="on"
oImg[this.index].style.display="block"
}
}
//下邊選項卡end
//下邊選項卡寬度區均值begin
for (var i=0;i<aLi.length;i++) {
aLi[i].style.width=(700/aLi.length)-(aLi.length*1)+"px"
}
//下邊選項卡寬度區均值begin
//封裝函式end
}
</script>
</body>
</html>
相關文章
- 使用原生js實現選項卡功能例項教程JS
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 前端--js實現選項卡前端JS
- 原生js tab選項卡程式碼例項JS
- JavaScript tab選項卡功能JavaScript
- JavaScript實現選項卡效果JavaScript
- js實現的垂直選項卡效果程式碼例項JS
- 原生JS 編寫移動端 tab選項卡JS
- 利用jQuery實現Tab選項卡jQuery
- 如何實現選項卡切換
- js實現的可以通用的選項卡程式碼例項JS
- jquery選項卡jQuery
- HarmonyOS NEXT 底部選項卡功能
- 純css實現tab選項卡效果CSS
- jQuery如何實現tab選項卡效果jQuery
- js選項卡簡單程式碼例項JS
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- 原生js使用物件導向的方法開發選項卡例項教程JS物件
- 小程式 — 選項卡
- javascript tab選項卡JavaScript
- 使用JS實現一個簡單的選項卡效果JS
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- jQuery選項卡例項程式碼jQuery
- js左右滑動選項卡效果程式碼例項JS
- 選項卡(物件導向)物件
- JavaScript 側欄選項卡JavaScript
- JavaScript tab選項卡效果JavaScript
- Matlab GUI選項卡MatlabGUI
- EasyUi之Tabs(選項卡)UI
- 微信小程式的tab選項卡的實現微信小程式
- css3實現的具有漸變效果的選項卡功能CSSS3
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- 物件導向實現的tab選項卡效果程式碼例項物件
- 直播平臺軟體開發,uni-app實現選項卡功能APP
- javascript實現tab選項卡過程分解詳解JavaScript