点击出现对应界面（第二个界面可以选择显示内容）------Sestid-CSDN博客

本文链接：https://blog.csdn.net/Sestid/article/details/102502189

样式图：

主页代码：

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>这是一个跳转的table卡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	ul{
		list-style: none;
		margin-top: 100px ;
	}
	li{
		margin: 10px;
	}
	a{
		text-decoration: none;
	}
</style>
</head>
<body>
    <ul>
    	<li><a href="./2.html?id=one">跳转到一项</a></li>
    	<li><a href="./2.html?id=two">跳转到二项</a></li>
    	<li><a href="./2.html?id=there">跳转到三项</a></li>
    	<li><a href=".2.html?id=four">跳转到四项</a></li>
    </ul>
</body>
</html>

跳转页面：

2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>table选项卡页面</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	#content{
		height:800px;width: 70%;
		background: #eee;
		margin: 0 auto;
		padding: 10px;box-sizing: border-box;
	}
	ul{
		list-style: none;
	}
	li{
		margin: 10px;
	}
	a{
		text-decoration: none;
		/* color: #fff; */
	}
	#theme{
		position: relative;
		top: 0;right: 0;
	}
	.nav{
		position: absolute;
		top: 0;left: 0;
		background: #fff;
		height: 300px; width: 20%;
		padding: 10px;
		border-radius: 5px;
	}
	.tb-place{
		position: absolute;
		left: 24%;top: 0;
		padding: 10px;
		background: #fff;
		height: 300px;
		display: none;
		border-radius: 5px;
	}
	.show{
		display: block;
	}
	.bottom{
		border-bottom: 4px double red;
	}	
</style>
</head>
<body>
	<div id="content">	
		    <h1>table选项卡页面</h1>
		    <hr>
		<div id="theme">
		    <div class="nav">
			    <ul>
			    	<li><a href="javascript:" class="bottom" data-get="one" >展示内容一</a></li>
			    	<li><a href="javascript:" data-get="two" >展示内容二</a></li>
			    	<li><a href="javascript:" data-get="there" >展示内容三</a></li>
			    	<li><a href="javascript:" data-get="four" >展示内容四</a></li>
			    </ul>
		    </div>
		    <!-- table选显卡内容显示 -->
		    <div>
			    <div class="tb-place show one">
			    	<h1>这是内容一</h1>
			    	<p style="text-indent:2em">浏览器定位插件，封装了标准HTML5定位，并且包含纠偏模块。
						由于核心是HTML5定位，所以浏览器定位插件仅适用于支持HTML5的浏览器上，比如，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同时，需要浏览器允许该服务进行定位。如下图：</p>
			    </div>
			    <div class="tb-place two">
			    	<h1>这是内容二</h1>
			    	<p style="text-indent:2em">求余运算符返回第一个操作数对第二个操作数的模，即 var1 对 var2 取模，其中 var1 和 var2 是变量。取模功能就是 var1 除以 var2 的整型余数。 以前有个提议，在ECMAScript未来的版本中，可能会有一个获取实际模的运算符。</p>
			    </div>
			    <div class="tb-place there">
			    	<h1>这是内容三</h1>
			    	<p style="text-indent:2em">包括 PHP 或 Python 等的大多数语言中，都包含幂运算符（一般来说符号是 ^ 或者 **）。这些语言中的幂运算符有着比其他的单目运算符（如一元 + 或一元 - ）更高的优先级。但是作为例外，在 Bash 中，**  运算符被设计为比单目运算符优先级更低。在最新的 JavaScript（ES2016） 中，禁止使用带歧义的幂运算表达式。比如，底数前不能紧跟一元运算</p>
			    </div>
			    <div class="tb-place four">
			    	<h1>这是内容四</h1>
			    	<p style="text-indent:2em">递增运算符为其操作数增加1，返回一个数值。
						如果后置（postfix）使用，即运算符位于操作数的后面（如 x++），那么将会在递增前返回数值。
						如果前置（prefix）使用，即运算符位于操作数的前面（如 ++x），那么将会在递增后返回数值。</p>
			    </div>
		    </div>
	    </div>
	</div>
	<script src="./jquery.js" ></script>
	<script type="text/javascript">
		/*获取当前url 关键字段的函数  用来获取页面一传过来的关键字*/
		function GetQueryString(name){
		     var reg = new RegExp("(^|&)"+name +"=([^&]*)(&|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]);
			 return null;
		}
		/*点击事件显示不同table页面效果*/
		$(".nav").on("click","a",function(e){
			e.preventDefault();	//阻止默认事件
			//console.log($(this));	//当前代理按键
			//console.log($(this).data("get")); //自定义属性的值
			var clname = "."+$(this).data('get');
			$(clname).show().siblings().hide();
			$(this).addClass("bottom").parent().siblings().children().removeClass("bottom");
		})
		/*跳转页面是显示的内容*/
		function show(){
			var id = GetQueryString("id");
			//当前下标的下划线
			console.log($("a[data-get='"+id+"']"));
			$("a[data-get='"+id+"']").addClass("bottom").parent().siblings().children().removeClass("bottom");
			//显示table选项卡内容
			$("."+id).show().siblings().hide();
		}
		show();
	</script>
</html>