选项卡（2）
面向对象实现选项卡组件
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="tab"> <div class="nav"> <div class="option cOp">个性分析</div> <div class="option">爱情分析</div> <div class="option">白羊男</div> <div class="option">白羊女</div> </div> <div class="content"> <p class="item show">星座不知何时已经进入人们的生活，年轻人与朋友见面聊天都会喜欢问一下星座，帮你看看你的性格怎么样，你有什么样的情感等等。但还是有的朋友对星座还不是很全面的了解。星座屋在这里给大家说说不同的星座不同的个性。</p> <p class="item">爱情是一直在人与人接触时会产生的情感，有人一见面就可能有，有人需要长时间的了解和互动才会有。但是不管哪一种，都是相互彼此的一种吸引。那么12星座爱情会怎样产生呢？一起来看看吧</p> <p class="item">都说女人难懂，其实男人更难懂啊。男人大多数习惯深沉，因为他们承受的，他们都只会默默的接受，而很少选择说出口。所以并不容易懂男人。不过星座可以看懂一个人，有何况是男人呢？</p> <p class="item">谈谈你身边的女人，是可爱呢？还是成熟呢？究竟是人见人爱的女生呢？还是大咧咧，能称兄道弟的女汉子？星座能看出你身边的女人是什么样的？一起来看看，星座屋是怎么讲述12星座女人的？</p> </div> </div> <script src="js/tab.js"></script> <script src="js/config.js"></script> </body> </html>
html,body,div,p{ margin: 0; padding: 0; } .tab{ width: 400px; /* height: 400px; */ border: 1px solid #000; margin: 30px auto; } .tab .nav{ height: 50px; background: #333; } .tab .nav .option{ /* display: inline-block; */ float: left; text-align: center; line-height: 50px; height: 100%; color: #ccc; } .tab .nav .cOp{ color: #fff; } .tab .content{ position: relative; height: 150px; overflow: auto; background: #666; } .tab .content .item{ position: absolute; box-sizing: content-box; padding: 10px; color: #fff; display: none; } .tab .content .show{ display: block; }
//构造函数 function Tab(container, opArr, itemArr){ this.container = container; this.opArr = opArr; this.itemArr = itemArr; this.count = 0; this.opWidth = 0; } //原型 Tab.prototype = { constructor: Tab, init: function(){ this.count = this.opArr.length; this.opWidth = this.container.offsetWidth; this.setOption(); }, setOption: function(){ var _this = this; for(var i = 0;i < this.count;i++){ this.opArr[i].style.width = this.opWidth / this.count + 'px'; this.opArr[i].index = i; this.opArr[i].onclick = function(){ for(var j = 0;j<_this.count;j++){ _this.opArr[j].className = 'option'; _this.itemArr[j].className = 'item'; } this.className = 'option cOp';//这里不能只写option,它会将整个class名字都改为cOp,而不是只添加cOp; // _this.itemArr[i].className = 'item show'; 这样写i是4 _this.itemArr[this.index].className = 'item show'; } } } }
var nav = document.querySelector('.nav'); var options = document.querySelectorAll('.nav .option'); var items = document.querySelectorAll('.content .item') // console.log(items); var tab = new Tab(nav, options, items); tab.init();
