頁面跳轉到table選項卡，並顯示指定的選項卡內容。
阿新 • • 發佈：2019-02-09
前兩天一個朋友問我，他要做一個！
要求是把在一個頁面跳轉到另一個頁面，在此就用頁面一和頁面二來描述。
頁面一有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>
程式碼總體難度不高！
當寫著玩…