如何实现vhtml选项卡切换内容？

2025-02-23 22:33:42

推荐回答（1个）

回答1：

如何实现vhtml选项卡切换内容？

1、三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、制作HTML结构框架

2、完成对应CSS的输入，使页面形成特定布局

tab切换 button { width:120px; height: 32px; line-height: 32px; background-color: #ccc; font-size: 24px; } div { display: none; width:200px; height: 200px; font-size: 72px; color:#ddd; background-color: green; border:1px solid black; } 1 1

3、输写javascript代码，对选项卡标头分别注册相应的事件

tab * {padding:0; margin:0;} button { background-color: #ccc; width:80px; height: 30px; } .btn-active { background-color: yellow; font-weight:bold; font-size: 14px; } div{ width:200px; height: 200px; font-size: 64px; background-color: #0c0; display: none; color:#fff; } .div-active { display: block; } 按钮1

//1.先获取元素 var buttonList = document.getElementsByTagName("button"); var divList = document.getElementsByTagName("div"); //2.添加事件 for(var i = 0; i < buttonList.length; i++) { buttonList[i].index = i; buttonList[i].onclick = function() { for(var j = 0; j < buttonList.length;j++) { buttonList[j].className = ""; divList[j].className = ""; } this.className = "btn-active"; divList[this.index].className = "div-active"; } }

4、完整代码：

选项卡 /* CSS样式制作 */ *{padding:0px; margin:0px;} a{ text-decoration:none; color:black;} a:hover{text-decoration:none; color:#336699;} #tab{width:270px; padding:5px;height:150px;margin:20px;} #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;} #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;} #tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;} #tab div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;} .hide{display:none;} // JS实现选项卡切换 window.onload = function(){ var myTab = document.getElementById("tab"); //整个div var myUl = myTab.getElementsByTagName("ul")[0];//一个节点 var myLi = myUl.getElementsByTagName("li"); //数组 var myDiv = myTab.getElementsByTagName("div"); //数组 for(var i = 0; i

房产家居二手房

切换代码tab 切换代码tab 切换代码tab/a> 切换代码tab

切换代码tab 切换代码tab 切换代码tab 切换代码tab

HTML中如何实现选项卡切换效果。

body部分

js特效
flash素材
亚当学院
在线客服代码

js特效内容

flash素材内容

亚当学院内容

在线客服代码内容

代码部分
$(function(){
$(".lanrenzhijia .tab a").mouseover(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
number = index;
$('.lanrenzhijia .content li').hide();
$('.lanrenzhijia .content li:eq('+index+')').show();
});