标签页切换

简介:

标签页切换应该是网页中最常见的功能之一了吧,今天简单的做个记录,希望能帮到一部分初学者


HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
< div  id = "header" >
     < ul  class = "clearfix" >
         <!-- 注意看a标签的href属性和下面三个div的id值 -->
         < li >< a  href = "#containerOne" >标签一</ a ></ li >
         < li  class = "active" >< a  href = "#containerTwo" >标签二</ a ></ li >
         < li >< a  href = "#containerThree" >标签三</ a ></ li >
     </ ul >
</ div >
 
< div  id = "mainContainer" >
     < div  id = "containerOne" >
         第一个标签页< br >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
     </ div >
     < div  id = "containerTwo"  class = "active" >
         第二个标签页< br >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores nemo possimus quas ratione? Aspernatur assumenda aut consequatur, culpa delectus exercitationem fuga laborum numquam provident sapiente, sequi suscipit ut voluptas!
     </ div >
     < div  id = "containerThree" >
         第三个标签页< br >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi, assumenda dolores doloribus eum ex expedita fuga fugiat impedit, laboriosam minus nam repellendus reprehenderit saepe sequi similique, sit sunt voluptatibus.
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam eius id, magni maiores odio provident quibusdam rerum tempora ullam? Assumenda deleniti impedit minima officiis perferendis. Accusantium dolorem nemo perferendis.
     </ div >
</ div >


CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*简单重置下样式*/
*{ margin : 0 padding : 0 ;}
ul{ list-style : none ;}
a{ text-decoration none color : #000 ;}
.clearfix{zoom: 1 ;}
.clearfix:after{ content : '' display : block clear : both ;}
/*标签头样式*/
#header{ background : #4bb ;}
#header ul li{ float : left width : 33.3% text-align : center ;}
#header ul li a{ display : block width : 100% height : 30px line-height : 30px font-weight : bold letter-spacing : 1px ;}
#header ul li.active{ background : #ae2 ;}
#header ul li.active a{ color #f00 ;}
/* 默认隐藏 */
#mainContainer>div{ display : none ;}
#mainContainer>div.active{ display : block ;}


JS代码,注意先引入jQuery

1
2
3
4
5
6
7
8
$( '#header ul li a' ).click( function (e){
     e.preventDefault();  //阻止a链接默认跳转
     //控制标签头
     $( this ).parent().addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
     //控制显示对应的div
     var  id = $( this ).attr( 'href' );  //获取a元素的href属性值
     $(id).addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
})


查看下切换效果截图:

wKioL1gZkQywxhxDAAAWCgX4TLU834.png


wKioL1gZkS-j5VmXAAAk_TkgEK0556.png

wKiom1gZkT-Dt7OJAAAx0C3Gp10248.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1868493


相关文章
|
7月前
|
存储
selenium+python:点击元素、alert弹框、鼠标操作(左键点击、右键点击、双击、鼠标悬浮)、下拉选项框、窗口切换等操作的处
selenium+python:点击元素、alert弹框、鼠标操作(左键点击、右键点击、双击、鼠标悬浮)、下拉选项框、窗口切换等操作的处
|
7月前
|
JavaScript
tab选项卡切换时echarts无法正常加载显示问题的解决方案
tab选项卡切换时echarts无法正常加载显示问题的解决方案
307 0
|
8月前
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
112 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
|
10月前
|
iOS开发 MacOS Windows
使用 Tab 键快速切换对话框按钮 | 一日一技
使用 Tab 键快速切换对话框按钮 | 一日一技
370 0
|
JavaScript IDE 开发工具
Html+CSS+JS 实现轮播切换
Html+CSS+JS 实现轮播切换
Html+CSS+JS 实现轮播切换
|
JavaScript
网页切出当前标签页时更改标题状态
网页切出当前标签页时更改标题状态
108 0
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
使用JQ实现点击其他区域关闭窗口的功能
使用JQ实现点击其他区域关闭窗口的功能
Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,需要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以可以用Axure中的动态面板(Dynamic Panel)来实现。 本文以已经汉化的Axure7.0为例,英语不太好的朋友可以先进行汉化(汉化的时候要注意版本,不同的版本,汉化文件也稍有差异)。
Axure实现Tab选项卡切换功能