选项卡--JQuery篇

最新推荐文章于 2022-11-14 15:31:33 发布

fuckingVictory

最新推荐文章于 2022-11-14 15:31:33 发布

阅读量118

点赞数

分类专栏： html 文章标签：选项卡 jq实现选项卡

本文链接：https://blog.csdn.net/weixin_44570977/article/details/90482310

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该方法实现选项卡原理:
每个a标签的对应一个div块,除了第一个div块,其他都隐藏起来,后面通过给a标签添加点击事件,获取a标签的href属性值,即该属性值去掉#号就是对应div块的id,通过给该块添加active类和删除其他块可能存在的active就可以很简单地实现了.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡-JQuery版</title>
		<style type="text/css">
			ul{
				clear: both;
				overflow: hidden;
				padding: 0;
			}
			ul li{
				float: left;
				list-style: none;
			}
			.option-blocks .block{
				overflow: hidden;
				display: none;
			}
			.active{
				display: block!important;/*提升级别,防止被以上的display: none覆盖*/
			}
			.option-tabs ul{
				border-bottom: 1px solid #ddd;
			}
			.option-tabs ul li a{
				text-decoration: none;
				padding: 5px 10px;
			}
			.option-tabs ul li a:visited{
				background: red;
			}
		</style>
	</head>
	<body>		
		<div clss="tabs-container">
			<div class="option-tabs">
				<ul>
					<li><a href="#block-a">block-a</a></li>
					<li><a href="#block-b">block-b</a></li>
					<li><a href="#block-c">block-c</a></li>
					<li><a href="#block-d">block-d</a></li>
				</ul>
			</div>
			<div class="option-blocks">
				<div id="block-a" class="block active">block-A</div>
				<div id="block-b" class="block">block-B</div>
				<div id="block-c" class="block">block-C</div>
				<div id="block-d" class="block">block-D</div>
			</div>
		</div>
		<!--引用jq插件-->
		<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<script>
			$('.option-tabs ul a').click(function(){
				//获取a标签的href属性值
				var href = $(this).attr('href');
				//移除所有的active类
				$('.option-blocks > .block').removeClass('active');
				//给当前选中的blcok增加active类
				$('.option-blocks > '+href).addClass('active');
				
			})
		</script>
	</body>
</html>

简单展示效果
在这里插入图片描述
优点:
1.只需要配置好a标签的href属性和div的id即可随时添加选项模块,不需要再动其他地方的代码(即href属性值和模块id值要一样,但是 href属性值前面需加一个#号).
2.代码量少.
3.原理容易理解.
缺点:选项卡每个模块id名需不一样.

注意:
只是简单实现了选项卡功能,具体css样式可自行设置.

fuckingVictory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡--JQuery篇

该方法实现选项卡原理:每个a标签的对应一个div块,除了第一个div块,其他都隐藏起来,后面通过给a标签添加点击事件,获取a标签的href属性值,即该属性值去掉#号就是对应div块的id,通过给该块添加active类和删除其他块可能存在的active就可以很简单地实现了.<!DOCTYPE html><html> <head> <meta ch...
复制链接

扫一扫

专栏目录