1、三个DIV形成的版块只会显示第三个汽车的内容。
二、制作过程
1、 制作HTML结构框架
2、完成对应CSS的输入，使页面形成特定布局
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> 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 } </style> </head> <body> <button style="background-color: yellow">1</button> <button>2</button> <button>3</button> <button>4</button> <div style="display:block">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> var buttonArr = document.getElementsByTagName("button") var divArr = document.getElementsByTagName("div") for(var i = 0 i < buttonArr.lengthi++) { buttonArr[i].index = i // buttonArr[i].setAttribute("index",i) buttonArr[i].onclick = function() { for(var j = 0 j < buttonArr.length j++) { buttonArr[j].style.backgroundColor = "#ccc" buttonArr[this.index].style.backgroundColor = "yellow" divArr[j].style.display = "none" divArr[this.index].style.display = "block" } } } </script> </body> </html>3、输写javascript代码，对选项卡标头分别注册相应的事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {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 } </style> </head> <body> <button class="btn-active">按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <div class="div-active">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> //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.lengthj++) { buttonList[j].className = "" divList[j].className = "" } this.className = "btn-active" divList[this.index].className = "div-active" } } </script> </body> </html>
4、完整代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{padding:0px margin:0px} a{ text-decoration:none color:black} a:hover{text-decoration:none color:#336699} #tab{width:270px padding:5pxheight:150pxmargin:20px} #tab ul{list-style:none display:height:30pxline-height:30px border-bottom:2px #C88 solid} #tab ul li{background:#FFFcursor:pointerfloat:leftlist-style:none height:29px line-height:29pxpadding: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:100pxwidth:250px line-height:24pxborder-top:none padding:1px border:1px solid #336699padding:10px} .hide{display:none} </style> <script type="text/javascript"> // 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<myLi.lengthi++){ myLi[i].index = i myLi[i].onclick = function(){ for(var j = 0 j < myLi.length j++){ myLi[j].className="off" myDiv[j].className = "hide" } this.className = "on" myDiv[this.index].className = "show" } } } </script></head><body><!-- HTML页面布局 --><div id = "tab"> <ul> <li class="off">房产</li> <li class="on">家居</li> <li class="off">二手房</li> </ul> <div id="firstPage" class="hide"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab/a> <a href = "#">切换代码tab</a> </div> <div id="secondPage" class="show"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> </div> <div id="thirdPage" class = "hide"> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> <a href = "#">切换代码tab</a> </div></div></body></html> HTML中如何实现选项卡切换效果。body部分
<div class="lanrenzhijia">
<div class="tab">
<a href="javascript:" class="on">js特效</a>
<a href="javascript:">flash素材</a>
<a href="javascript:">亚当学院</a>
<a href="javascript:">在线客服代码</a>
</div>
<div class="content">
<ul>
<li style="display:block">js特效内容</li>
<li>flash素材内容</li>
<li>亚当学院内容</li>
<li>在线客服代码内容</li>
</ul>
</div>
</div>
代码部分
$(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()
})
普通banner或信息列表可以用IScroll上下左右均可滑动页面滑动切换的话建议使用jquery mobile，实现如下事件，进行changepage
swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发
swipeleft（左划）：划动事件为向左的方向时触发
swiperight（右划）：划动事件为向右的方向时触发
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）