介绍 & lt; !DOCTYPE html>
& lt; html lang=皕h-CN"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title>选项卡栏切换操作& lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
box-sizing: border-box;
｝
.tab {
保证金:100 px的汽车;
宽度:1200 px;
身高:330 px;
背景颜色:宝蓝色;
｝
.tab .tab_list {
高度:30 px;
background - color: slategrey;
｝
李.tab ul {
浮:左;
list-style:没有;
光标:指针;
宽度:100 px;
高度:30 px;
｝
.color {
背景颜色:红色;
｝
.tab .tab_con {
身高:300 px;
背景颜色:银色;
｝
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皌ab"祝辞
& lt; div类=皌ab_list"祝辞
& lt; ul>
& lt;李类=癱olor"祝辞商品介绍& lt;/li>
& lt; li>规格与包装& lt;/li>
& lt; li>售后保障& lt;/li>
& lt; li>商品评价& lt;/li>
& lt; li>手机社区& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=皌ab_con"祝辞
& lt; div类=癷tem"在商品介绍& lt;/div>
& lt; div类=癷tem"在规格与包装& lt;/div>
& lt; div类=癷tem"在售后保障& lt;/div>
& lt; div类=癷tem"在商品评价& lt;/div>
& lt; div类=癷tem"祝辞手机社区& lt;/div>
& lt;/div>
& lt;/div>
& lt; script>
var tab_list=document.querySelector (& # 39; .tab_list& # 39;);
var lis=tab_list.querySelectorAll(& # 39;李# 39;);
var=document.querySelectorAll物品(& # 39;.item& # 39;);
我(var=0; i< lis.length;我+ +){//给所有的李添加自定义属性索引号
lis[我].setAttribute(& # 39;指数# 39;,我)//设置鼠标点击事件
lis[我]。onclick=function () {
我(var=0; i< lis.length;我+ +){//将所有类的类名设置为空
lis[我].className=& # 39; & # 39;;//将所有的显示设置为零
项目[我].style.display=& # 39;没有# 39;;
｝//给点击事件的类名设置为颜色
this.className=& # 39;颜色# 39;;//获取点击事件的索引号
var指数=this.getAttribute(& # 39;指数# 39;);//(var=0; i
& lt;/body>
& lt;/html>
这篇文章给大家介绍利用JS制作一个网页选项卡栏效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
具体内容如下
在网页的制作中,通常会使用到标签栏,例如淘宝,商品详情,规格参数和累计评价三个栏,点击不同的栏下面出现的内容不同。在这样的设计中,JS可以做到。
根据淘宝做出默认状态下为商品介绍栏以及对应的文字,鼠标点击其他栏目,点击的栏目背景颜色变红,同时下面的栏目出现点击栏目的解释。
程序源码:
关于利用JS制作一个网页选项卡栏效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
