专栏首页小白程序猿Jq实现简单的选项卡功能

Jq实现简单的选项卡功能

下面我们使用Jquery实现简单的选项卡效果,以下为示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,li{
				padding: 0;
				margin: 0;
			}
			.content{
				width: 380px;
			}
			.content #div0,#div1,#div2{
				border:solid 2px pink;
			}
			#div0 ul,#div1 ul,#div2 ul{
				padding: 10px 30 10px 30px;
			}
			.content #ul1{
				list-style: none;
				overflow: hidden;
				height: 38px;
				line-height: 38px;
			}
			#ul1 li{
				width: 80px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				float: left;
				cursor: pointer;
			}
			.cur{
				background: red;
				color: white
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul id="ul1">
				<li class="cur">国内</li>
				<li>国际</li>
				<li>体育</li>
			</ul>
			<div id="div0">
				<ul>
					<li><a href="">【国内】标题一</a></li>
					<li><a href="">【国内】标题二</a></li>
				</ul>
			</div>
			<div id="div1" style="display: none;">
				<ul>
					<li><a href="">【国际】标题一</a></li>
					<li><a href="">【国际】标题二</a></li>
				</ul>
			</div>
			<div id="div2" style="display: none;">
				<ul>
					<li><a href="">【体育】标题一</a></li>
					<li><a href="">【体育】标题二</a></li>
				</ul>
			</div>
		</div>
		<script src="jquery.min.js"></script>
		<script>
			$(function(){
				$("#ul1 li").each(function(index){
					$(this).mouseenter(function(){
						$("#div0,#div1,#div2").hide();
						$("#div"+index).show();
						$("#ul1 li").removeClass("cur");
						$(this).addClass("cur");
				});
				})
			});
		</script>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQ实现二级导航菜单

    实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果。

    申霖
  • 纯CSS编写三级导航菜单-附源码

    在我们日常浏览网站过程中,会发现每一个网站都会有导航栏,导航栏是做什么的?在一个网站中具有怎么样的意义呢?我们先来了解一下这个问题。

    申霖
  • 页面引入CSS的四种方式及区别

    一个前端页面(原生)由HTML+CSS+JS+Image组成,页面效果由CSS负责,好的页面会吸引用户访问、停留。那么页面是如何靠css来达到效果的呢?下面说说...

    申霖
  • jQuery文档对象模型DOM的实际应用

    DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

    祈澈菇凉
  • 一些经典案例

    小闫同学啊
  • SuperSlide轮播插件滚动高度或宽度不对的问题解决

    SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 的绝大部分...

    德顺
  • 简单轮播图实现

    用户1749219
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    守候i
  • 第32天:微博发布动态

    半指温柔乐
  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺

扫码关注云+社区

领取腾讯云代金券