文档章节

jquery实现导航内容切换

wftt
 wftt
发布于 2018/03/09 18:45
字数 312
阅读 1501
收藏 0

点击导航切换到相应内容,其他部分不动,这时候不需要页面跳转,以下操作简单方便。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		a{
			text-decoration: none;
			color:#333;
			font-weight: bold;
		}
		#wrap{
			width:960px;
			display: block;
			margin:0 auto;
		}
		.head .headMenu{
			height:40px;
			line-height:39px;
			border:1px solid #e3e3e3;
			border-radius:3px;
		}
		.head .headMenu li{
			display: block;
			padding-left:10px;
		}
		.head .headMenu li a{
			float:left;
			padding:0 50px;
			font-size:16px;
		}
		.head .headMenu li a:hover{
			color:red;
		}
		.tab_container{
			text-align: center;
			height:300px;
			line-height: 300px;
			border:1px solid #e3e3e3;
		}
		#wrap .head .headMenu .active a{
			color:blue;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="head">
			<ul class="tabs headMenu">
			 	<li class="active"><a href="#tab1">A</a></li>  
		        <li><a href="#tab2">B</a></li>  
		        <li><a href="#tab3">C</a></li>  
		        <li><a href="#tab4">D</a></li>  
		        <li><a href="#tab5">E</a></li>  
			</ul>
		</div>
		<div class="tab_container">  
			<div id="tab1" class="tab_content" style="display: block; ">  
				<h1>This is pageA.</h1>
			</div>
			<div id="tab2" class="tab_content" style="display: block; ">  
				<h1>This is pageB.</h1>
			</div>
			<div id="tab3" class="tab_content" style="display: block; ">  
				<h1>This is pageC.</h1>
			</div>
			<div id="tab4" class="tab_content" style="display: block; ">  
				<h1>This is pageD.</h1>
			</div>
			<div id="tab5" class="tab_content" style="display: block; ">  
				<h1>This is pageE.</h1>
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  
    $(".tab_content").hide();  
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show();   
      
 
    $("ul.tabs li").click(function() {  
        $("ul.tabs li").removeClass("active");  
        $(this).addClass("active"); 
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");   
        $(activeTab).fadeIn();  
        return false;  
    });  
</script>
</html>

很简单,在这里就不多说了!

 

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
63
0
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.6K
11
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
109
0
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.5K
5

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
12
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部