1、我们都知道jQuery是一个封装好的函数方法库,通过jQuery可以将更加简单的实现链式编程。下面给大家一个一行代码实现选项卡效果。
1-1.首先就是先简单的写一下结构样式
1.1.1
准备工作—从jQuery官网下载方法库放在项目文件中等待html文件加载
选项卡业务分析:
(1)首先是在一个大的div(盒子)里包着两个小盒子(ul ol)
(2)当点击或者经过 ul 里的 li 标签时 ol 里的相同索引的 li 显示 其他的兄弟 li 隐藏(ol 下的li 默认隐藏 在 ul li 被点击时 ol 里的 相同 索引下标 的li 才会 赋值样式 display:flex;让其显示)
(3)当点击 ul 下的 li 时,被点击的 li 添加样式,它的所有兄弟 li 去除样式
1.1.2
写好选项卡的页面HTML结构
<div class="tabcard">
<ul>
<li class="active">新闻</li>
<li>发现</li>
<li>关于我们</li>
</ul>
<ol>
<li class="active new">
你说我的眼睛灿若星辰,那是因为你是星辰,而我的眼中只有你。
</li>
<li class="find">
我喜欢那些闪光的东西,比如冬日的雪花,天上的星星,还有你的眼睛。
</li>
<li class="about">
像华丽的燕尾蝶,失去往日的光彩、变作一片枯死的叶。
</li>
</ol>
</div>
样式如下图:
当然这个选项卡不是很美观,样式都可以自己去设定。这里就简单的做一个样式。
1.1.3
下面是css样式:
可以用来参考,根据自身需要进行修改
.tabcard {
width: 100%;
border: 2px solid red;
height: 200px;
}
.tabcard ul {
margin: 0;
width: 100%;
height: 30px;
border-bottom: 2px solid red;
display: flex;
justify-content: space-around;
align-items: center;
}
.tabcard ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 30px;
}
.tabcard ol {
width: 100%;
height: calc(100% - 30px);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex: 1;
position: relative;
}
.tabcard ol li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
padding: 20px;
display: none;
}
.tabcard ul li:nth-child(2) {
border-right: 4px solid gray;
border-left: 4px solid gray;
}
.new {
background: rgb(118, 147, 158);
}
.find {
background: rgb(212, 180, 180);
}
.about {
background: rgb(192, 70, 70);
}
.tabcard ul li.active {
background: skyblue;
color: red;
}
.tabcard ol li.active {
display: flex;
}
1.1.4
下面是js的相关代码
(1)先加载到 下载下来的 jQuery方法库。
(2)然后在进行链式编程。
<script src="./jquery.min.js"></script>
<script>
//这里是给所有的ul下的li添加点击事件
$('.tabcard>ul>li').click(function () {
//这里的this是被点击的标签本身
//意思是:给当前被点击的标签添加 active 这个类名里的css样式
$(this).addClass('active')
//被点击标签的所有兄弟标签
.siblings()
//移出类名为 active 的CSS样式
.removeClass('active')
//当前被点击的li的直接父级
.parent()
//的下一个兄弟标签
.next()
//找到里面的li
.find('li')
//移出里面的 类名为active 的CSS样式
.removeClass('active')
//选择和当前被点击的ul 下的 li 相同的 ol 下的 li 添加样式 让其显示
.eq($(this).index()).addClass('active');
})
</script>
有不对的地方还望多多包涵指出。
-- 展开阅读全文 --
测试[呵呵]