html中制作选项卡(tabs)

快速建立一个html选项卡(tabs)

在网页中常常会看到这样的标签页,其实实现的方法也不难,接下来就介绍如何快速的建立一个html标签卡

 

 

这是我做好的demo预览效果

 

使用的软件以及技术:

  1. sublime text 3编辑器
  2. html+css
  3. jQuery

 

1.建立一个html,并写好基本的结构

如果你使用的是sublime text 3并安装emmet插件,就可以快速创建了:div>(ul>li{Section $}*4)+div*4,然后敲击tab键。

给整体的div添加class为label,给第一个li添加class为showed,给第一个小div添加class为showed,并完善div里的文字内容

 

<div class="label">
	<ul>
		<li class="showed">Section 1</li>
		<li>Section 2</li>
		<li>Section 3</li>
		<li>Section 4</li>
	</ul>
	<div class="showed"><h3>This is the first section</h3></div>
	<div><h3>This is the second section</h3></div>
	<div><h3>This is the third section</h3></div>
	<div><h3>This is the fourth section</h3></div>
</div>

 

 

2.编写css样式

  1. 设定label的大小为宽400,高500,位置和文字都居中。
  2. 设定ul的大小为宽400,高50,
  3. 设定li的大小为宽100,高50,无头部样式,向左浮动,默认的背景色为灰色,文字为白色上下居中。
  4. 设定下面的内容宽400,高50,绝对定位(让四个div重叠),文字为白色,背景为灰黑色,默认隐藏。
  5. li标签中的showed类就是现在要展示的标签,突出展示,颜色为灰黑色,顶部有橘色的边框,文字调整高度居中,设置阴影突出立体感。
  6. div标签中的showed类就是对应展现的内容了,display改为block显示,并设置阴影突出立体感。

代码如下:

*{
	margin: 0px;
	padding: 0px;
}
.label{
	width: 400px;
	height: 500px;
	margin: 120px auto;
	text-align: center;
}
.label>ul{
	width: 400px;
	height: 50px;
}
.label>ul>li{
	list-style: none;
	float: left;
	width: 100px;
	height: 50px;
	background-color: gray;
	line-height: 50px;
	color: white;
}
.label>div{
	width: 400px;
	height: 500px;
	position: absolute;
	color: white;
	line-height: 70px;
	background-color: #222222;
	display: none;
}
.label li.showed{
	background-color: #222222;
	border-top: 5px solid orange;
	line-height: 40px;
	box-shadow: 5px 5px 20px #333333;
}
.label div.showed{
	display: block;
	box-shadow: 5px 5px 20px #333333;
}

 

 

3.编写js

  1. 首先引入jqurey
  2. 当鼠标悬停在li标签上时,如果不是showed类的话(不是当前展现的内容),执行以下步骤
  3. 将带有showed类的标签去掉showed类
  4. 将当前的li添加上showed类
  5. 将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类
<script type="text/javascript" src="jquery-1.6.js"></script>
<script>
		$(".label li").mouseenter(function () {
	     if(! $(this).hasClass(".showed")){
	    $(".showed").removeClass("showed");
        $(this).addClass("showed");
    	$(".label>div").eq($(this).index()).addClass("showed");
    	}
    })
</script>

 

4.完成

这样简单的几个步骤就完成动态的选项卡切换效果,演示在文章的开头,完整的demo文件在百度网盘中。

标签卡Demo.html演示文件:百度网盘 https://pan.baidu.com/s/1bpVwQuV

 

 

 

 

 

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值