頁面跳轉到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>
程式碼總體難度不高!
當寫著玩…