选项卡（2）

最新推荐文章于 2022-10-24 17:31:20 发布

diemengxia1380

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/flyingLcode/p/7765484.html

版权

面向对象实现选项卡组件

实例：

<!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();

转载于:https://www.cnblogs.com/flyingLcode/p/7765484.html

diemengxia1380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡（2）

面向对象实现选项卡组件实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫