1. 程式人生 > >頁面跳轉到table選項卡,並顯示指定的選項卡內容。

頁面跳轉到table選項卡,並顯示指定的選項卡內容。

前兩天一個朋友問我,他要做一個!

要求是把在一個頁面跳轉到另一個頁面,在此就用頁面一和頁面二來描述。

頁面一有4個跳轉都是同一個頁面二,頁面二是一個table選項卡,顯示4總不同的內容。

分別點頁面一來初始化頁面二的初始頁面選擇!聽完以後大致幫他分析了一下,頁面以傳參來控制頁面二初始效果。

挺簡單,今天順便斜著玩玩。

上程式碼:

頁面一

<!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="目標頁面.html?id=one">跳轉到一項</a></li>
    	<li><a href="目標頁面.html?id=two">跳轉到二項</a></li>
    	<li><a href="目標頁面.html?id=there">跳轉到三項</a></li>
    	<li><a href="目標頁面.html?id=four">跳轉到四項</a></li>
    </ul>
</body>
</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="js/jquery-1.11.3.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>

程式碼總體難度不高!

當寫著玩…