樣式圖:
主頁代碼:
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>