链接到tab页面中的某一项

最新推荐文章于 2021-06-04 17:32:21 发布

紫雪璇雨

最新推荐文章于 2021-06-04 17:32:21 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签：链接到tab页面的某一项 tab链接 tab

本文链接：https://blog.csdn.net/ly2983068126/article/details/49277701

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在网上搜了好多，都没有找到想要的效果，或者就是找得到不能用。自己就根据他们的提示，自己写了这两个页面，希望能对大家有所帮助。

1.html

1、首先想要链接到另一个页面，所用到的就是<a href="2.html#1"></a>，这个方法很常见。

注意：#后边的id是tab中选项的id，不是tab内容的id

2、和2.html建立联系

2.html

1、既然是tab，当然需要先有tab页面，每个tab的选项需要一个id值

2、和1.html建立联系

具体代码如下：

1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="baidu-site-verification" content="VtO3sJpoSM"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<script src="js/jquery-1.10.1.min.js"></script>
  	<script type="text/javascript">
		 	
			$(document).ready(function () {
				var tabId = location.hash; // 将看起来像“# h-02”
			 	if(tabId){
			 		$(tabId).show(); // 这将发射只有当url获取散列
			 		$(tabId).siblings().hide(); // 这将只显示目标选项卡 
			 	}
			 	$('.tab-link').click(function(){
				 	$('ul.tabs li a[href="'+this.href+'"]').parent().click();
				});
			});
			
  	</script>
  	<style type="text/css">
  		a{line-height: 30px;}
  	</style>
</head>

<body>
	<a href="2.html#1" class="tab-link">Click here to go to tab 1</a><br />
	<a href="2.html#2" class="tab-link">Click here to go to tab 2</a><br />
	<a href="2.html#3" class="tab-link">Click here to go to tab 3</a><br />
	<a href="2.html#4" class="tab-link">Click here to go to tab 4</a><br />
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="baidu-site-verification" content="VtO3sJpoSM"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<script src="js/jquery-1.10.1.min.js"></script>
  	<style type="text/css">
  		.active{background: #faa;}
  		.tabs{list-style: none;}
  		.tabs li{float: left;margin: 10px;}
  		.tab_container{clear: both;}
  	</style>
  	<script type="text/javascript">
		 	$(document).ready(function() {
			  //默认的动作
			 	$(".tab_content").hide(); //隐藏所有内容
			 	$("ul.tabs li:first").addClass("active").show(); //第一个选项卡激活
			 	$(".tab_content:first").show(); //第一个选项卡显示内容
			 	//单击事件
			 	$("ul.tabs li").click(function() {
			  	$("ul.tabs li").removeClass("active"); //删除任何“active”类
			  	$(this).addClass("active"); //“active”类添加到选定的选项卡
			  	$(".tab_content").hide(); //隐藏所有选项卡的内容
			  	var activeTab = $(this).find("a").attr("href"); //找到rel属性值来识别active tab+content
			  	$(activeTab).fadeIn(); //active content淡入
			  	return;
			 	});
			 	
			 	
			 	var tabId = window.location.hash; // 将看起来像“# h-02”
			 	$(tabId).click(); // 在你绑定点击监听器
			});
  	</script>
</head>

<body>
	<ul class="tabs">
	  <li><a href="#tab1" id="1">Ex 1</a></li>
	  <li><a href="#tab2" id="2">Ex 2</a></li>
	  <li><a href="#tab3" id="3">Ex 3</a></li>
	  <li><a href="#tab4" id="4">Ex 4</a></li>
  </ul>
  
  <div class="tab_container">
  	<div id="tab1" class="tab_content">
   		<h2>Ex 1</h2>
   		<p>dlkfjdsla,dklsajf,dklajfkld.</p>
   	</div>
   	<div id="tab2" class="tab_content">
   		<h2>Ex 2</h2>
   		<p>daljfdjal,dlskajfdkls,dskalfjdska,dsalkfa.</p>
   	</div>
   	<div id="tab3" class="tab_content">
   		<h2>Ex 3</h2>
   		<p>jeafjlk,dslkajf,dsklajf,dslakj.</p>
   	</div>
   	<div id="tab4" class="tab_content">
   		<h2>Ex 4</h2>
   		<p>ajdlk,dskalj,dsaklj,welk,lk.</p>
   	</div>
 	</div>
</body>
</html>

紫雪璇雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
链接到tab页面中的某一项

在网上搜了好多，都没有找到想要的效果，或者就是找得到不能用。自己就根据他们的提示，自己写了这两个页面，希望能对大家有所帮助。1.html1、首先想要链接到另一个页面，所用到的就是，这个方法很常见。注意：#后边的id是tab中选项的id，不是tab内容的id2、和2.html建立联系2.html1、既然是tab，当然需要先有tab页面，每个tab的选项需要一个id值
复制链接

扫一扫