开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

标签页切换

简介:
+关注继续查看

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


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:0padding:0;}
ul{list-style:none;}
a{text-decorationnonecolor:#000;}
.clearfix{zoom:1;}
.clearfix:after{content:''display:blockclear:both;}
/*标签头样式*/
#header{background:#4bb;}
#header ul li{float:leftwidth:33.3%text-align:center;}
#header ul li a{display:blockwidth:100%height:30pxline-height:30pxfont-weight:boldletter-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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
umi 如何实现标签页切换和路由动效
umi 如何实现标签页切换和路由动效
471 0
取消a标签的默认跳转行为
取消a标签的默认跳转行为
103 0
<A>标签锚标记
链接到本页面   – 锚记标签用于使用户“跳”到文档的某个部分   – HTML 的NAME 属性用于创建锚标记 主题名称     – 为达到这种跳转效果,请在HREF 参数中使用该标记 主题名称     只定义NAME属性相当于定义一个位置 跳转到本文档中相应锚标记位置     链接到...
840 0
CSS之A标签
a标签,超级链接 a是英语anchor锚的意思。 a标签常用的就是三个属性: 1        超级链接文字   页面内的锚点,用name属性或者id属性 1                2                如果想跳转到某个锚点: 1       
708 0
Struts标签
1、s:actionmessage http://blog.csdn.net/laiahu/article/details/2203143 http://leaze.blog.51cto.com/83088/51750  2、
609 0
C#迭代器的使用
原文地址:http://msdn.microsoft.com/zh-cn/library/65zzykke.aspx   创建迭代器最常用的方法是对 IEnumerable 接口实现 GetEnumerator 方法,例如: public System.Collections.IEnumerator GetEnumerator(){    for (int i = 0; i GetEnumerator 方法的存在使得类型成为可枚举的类型,并允许使用 foreach 语句。
578 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载