jQuery实现选项卡

最新推荐文章于 2024-02-11 11:12:49 发布

李任贤

最新推荐文章于 2024-02-11 11:12:49 发布

阅读量236

点赞数

分类专栏：原创 jQuery特效 javascript 前端文章标签：特效 jQueryr选项卡 js 前端

本文链接：https://blog.csdn.net/LiRenxian0316/article/details/80966115

版权

原创同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
    /* 公共样式 */
    div,ul,li,a {
	margin:0;
	padding:0;
	list-style: none;
    }
    /* 最外层的容器 */
    .div1 {
	width: 278px;
	height: 180px;
	border: 1px solid #e8df83;
	position: relative;
    }
    /* 所有的a元素 */
    .div1 ul a {
	color: #594E4E;
	text-decoration: none;
    }
		
    /* 标题 */
    .div1 .tit ul a {
	margin-right:-5px;
	display: inline-block;
	width: 56px;
	height: 35px;
	line-height: 35px;
	text-align: center;
    }
    .div1 .tit ul a:hover {
	text-decoration: underline;
    }
    a.active {
	color: #29A3F1!important;
    }
    /* 内容 */
    .div1 .con {
	width: 279px;
        height: 145px;
    	position: absolute;
    	left:0;
    	top:35px;
    	display: none;
    }
    .div1 .con li {
	margin: 0px 0 7px 0px;
	padding-top:6px;
    }
</style>
<script src="public/jquery.min.js"></script>
    <script>
	$(function()
	{
	    var $aIndex = null;
	    // 初始化
            $('.div1 .tit ul a').first().addClass('active').siblings('a').removeClass('active');
	    $('.div1 .con').first().show().siblings('.con').hide();

	    /* 标题 鼠标移进事件 */
	    $('.div1 .tit ul a').mouseenter(function()
	    {
		$aIndex = $(this).index();
		$(this).addClass('active').siblings('a').removeClass('active');
		$('.div1 .con').eq($aIndex).show().siblings('.con').hide();
	    });
	    /* 内容 鼠标移进事件 */
	    $('.div1 .con ul li').mouseenter(function()
	    {
	        $(this).find('a').css(
	        {
		    'text-decoration':'underline',
		    'color':'#F85565'
	        });
	    });
	    /* 内容 鼠标移出事件 */
	    $('.div1 .con ul li').mouseleave(function()
	    {
		$(this).find('a').css(
	        {
		    'color':'#594E4E',
		    'text-decoration': 'none'
		});
	    });
        });
    </script>
</head>
<body>
    <div class="div1">
	<!-- 标题 -->
	<div class="tit">
	    <ul>
		<a href="#" target="_blank">生活</a>
		<a href="#" target="_blank">健康</a>
		<a href="#" target="_blank">女性</a>
		<a href="#" target="_blank">历史</a>
		<a href="#" target="_blank">旅游</a>
	    </ul>
        </div>

      <!-- 标题 end -->

<div class="con"> <ul><li><a href="#" target="_blank">皇帝为何喜欢太监侍奉？而不是宫女</a></li><li><a href="#" target="_blank">故宫到半夜为何全是乌鸦声？专家揭秘</a></li><li><a href="#" target="_blank">简直不敢信！安检机竟能看到这些东西</a></li><li><a href="#" target="_blank">情商高的女人，微信上不会有这个表现</a></li> </ul></div><div class="con"> <ul><li><a href="#" target="_blank">比熬夜更伤肝的4件事你一定想不到</a></li><li><a href="#" target="_blank">菜谱：非常适合带饭上班的简易便当！</a></li><li><a href="#" target="_blank">怎么才能让大脑老得慢？坚持这7件事</a></li><li><a href="#" target="_blank"><黄瓜可美容养颜但不能和此物一起吃</a></li> </ul> </div><div class="con"> <ul><li><a href="#" target="_blank">Baby二胎有望？黄晓明愿望要实现</a></li><li><a href="#" target="_blank">三十岁的女人让男人们欲罢不能！</a></li><li><a href="#" target="_blank">王李丹妮简直了！把裙子穿成比基尼</a></li><li><a href="#" target="_blank">为什么中国美女都喜欢嫁给非洲黑人</a></li> </ul></div><div class="con"> <ul><li><a href="#" target="_blank">毛蒋遗嘱写了什么？有一条竟惊人相似</a></li><li><a href="#" target="_blank">妃子被活殉葬，二十年后和守墓人生子</a></li><li><a href="#" target="_blank">宋美龄死后留下四大谜团，至今无解</a></li><li><a href="#" target="_blank">四人帮后人下场曝光！女儿被搞成这样</a></li> </ul></div><div class="con"> <ul><li><a href="#" target="_blank">特价机票周周有，快戳这里！</a></li><li><a href="#" target="_blank">听说90%的达人都在这里预订酒店</a></li><li><a href="#" target="_blank">周边门票随手订，过不一样的周末</a></li><li><a href="#" target="_blank">网上订汽车票，只需1分钟</a></li> </ul></div> </div></body></html>

李任贤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现选项卡

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;选项卡&lt;/title&gt;&lt;style&gt; /* 公共样式 */ div,ul,li,a { margin:0; pad
复制链接

扫一扫