我们准备一个TAB导航#pagenavi，里面包含TAB导航要切换的四个导航按钮，然后是切换的主体内容#slider，这里应该放置四个li与导航按钮对应，内容自定义。
由于是移动端应用，我们加载zepto.js，zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js。
接下来我们就直接调用TouchSlider，通过设置绑定tab，滑动方向、速度、时间等信息实现内容切换，请看详细代码：
<script type="text/javascript">
var page='pagenavi'
var mslide='slider'
var mtitle='emtitle'
arrdiv = 'arrdiv'
var as=document.getElementById(page).getElementsByTagName('a')
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
var as=document.getElementById(this.page).getElementsByTagName('a')
as[this.p].className=''
as[index].className='active'
this.p=index
var txt=as[index].innerText
$("#"+this.page).parent().find('.emtitle').text(txt)
var txturl=as[index].getAttribute('href')
var turl=txturl.split('#')
$("#"+this.page).parent().find('.go_btn').attr('href',turl[1])
}})
tt.page = page
tt.p = 0
for(var i=0i<as.lengthi++){
(function(){
var j=i
as[j].tt = tt
as[j].onclick=function(){
this.tt.slide(j)
return false
}
})()
}
</script>
html 选项卡切换内容方法：
工具/原料
网页编辑器dreamweaver
javascript中的getElementById和getElementsByTagName方法
*** 作步骤：
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><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab/a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div></div></body></html>
常见命名.wrap或.wrapper--用于外侧包裹
.container或.ct--包裹容器
.header--用于头部
.body--页面 body
.footer--页面尾部
.aside、sidebar--用于侧边栏
.content--和header footer对应，用于主要内容
.navigation--导航元素
.pagination--分页
.tabs >.tab--tab切换
.breadcrumbs--导航列表、面包屑
.dropdown--下拉菜单
.article--文章
.main--用于主体
.thumbnail--头像、小图像
.media--媒体资源
.panel--面板
.tooltip--鼠标放置上去的提示
.popup--鼠标点击d出的提示
.button、btn--按钮
.ad--广告
.subnav--二级导航
.menu--菜单
.tag--标签
.message或.notice--提示消息
.summary--摘要
.logo--logo
.search--搜索框
.login--登录
.register--注册
.username--用户名
.passwprd--密码
.banne --广告条
.copyright--版权
.modal或.dialog--d窗
状态:
inverse--相反的
toggled--切换
switched--转换
original--起初的
initial--最初的
identified--识别
disabled--禁用
loading--加载
pending--等待
syncing--同步
default--默认
修饰:
dark--黑暗的
light--浅色的
shaded--深色阴影的
flat--平滑的
ghost--精灵
maroon--褐红色的
pale--白
intense--强烈的
twisted--扭曲的
narrow--狭窄的
wide--宽的
smooth--光滑的
separate--分离
clean--清洁的
sharp--锋利的
aligned--对齐的
元素:
pagination--分页
modal--情态动词
popup--d出
article--文章
story--故事
flash--闪光
status--现状
state--州立
media--媒体
block--快
card-卡
teaser--挑逗
badge--徽章
label--标签
sheet--片材
poster--海报
notice--通知
record--记录
entry--入门
item--项目
figure--图
square--广场
module--模块
bar--酒吧
button--按钮
action--行动
knob--旋钮
布局:
navigation--航行
wrapper--包装器
inner--内部的
header--页眉
footer--页脚
aside--在一边
section--部分
divider--除法器
content--内容
container--容器
panel--面板
pane--窗格
construct--建造
composition--作文
spacing--间距
frame--框架
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）