php下載遠程大文件(獲取遠程文件大小)的實例
710
2024-01-10
網頁選項卡可以較好的利用有限的頁面來展示更多的元素,而使用JQuery來制作網頁選項卡也是一件非常簡單的事情。今天就來分享一個網頁選項卡的制作小技巧。
◦引入所需庫
◦選項卡原理
◦業務核心
◦完整小例子
引入所需庫
這個知識點很基礎,但是為了照顧fresh man ,我還是寫一下吧。
選項卡原理
選項卡出現其實只是某一個div獲取到了顯示的權限,其他的沒有顯示而已。
•網頁代碼
<div class="tab"> <div class="tab_menu"> <ul> <li class="selected">選項卡1</li> <li>選項卡2</li> <li>選項卡3</li> </ul> </div><br><br><br> <div class="tab_box"> <div>選項卡1:這里是1號內容區域</div> <div class="hide">選項卡2:這里是2號內容區域</div> <div class="hide">選項卡3:這里是3號內容區域</div> </div> </div>
•添加點樣式元素
<style> // 使得UL中的li標簽水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; // 這樣可以防止li標簽出現換行的顯示 display:inline-block; } .tab_menu { list-style:none; /* 去掉ul前面的符號 */ margin: 0px; /* 與外界元素的距離為0 */ padding: 0px; /* 與內部元素的距離為0 */ width: auto; /* 寬度根據元素內容調整 */ } .tab_box { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 邊框 */ color: #dde4ec; /* 文字顏色 */ display: block; /* 此元素將顯示為塊級元素,此元素前后會帶有換行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 內部填充的距離 */ text-decoration: none; /* 不顯示超鏈接下劃線 */ white-space: nowrap; /* 對于文本內的空白處,不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。 */ } .selected { background-color: green; display: block; } .hide { display: none; } </style>
•JQuery控制
<script> // 加上鼠標的點擊效果 $(function(){ $("ul li").click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) }) // 加上鼠標懸浮效果 $(function(){ $("div.tab_menu ul li").hover(function(){ $(this).addClass("selected").show(); // 下面的這個可以實現選項卡的聯動效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); },function(){ $(this).removeClass("selected").show(); // 下面的這個可以實現選項卡的聯動效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) }) </script>
業務核心
里面最關鍵的其實還是最為基礎的JQuery選擇器的使用,然后我們就可以動態的改變頁面上的元素,從而實現我們想要的效果。這也是JQuery的強大之處。
這里比較有技巧性的就是通過對ul li樣式的變換,實現了類似于導航欄的效果。我們可以借鑒到今后的開發之中。這是一個非常實用的小技巧。
// 使得UL中的li標簽水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; display:inline-block; }
完整小例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tab Host Demo</title> <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery-2.2.4.min.js"></script> <style> // 使得UL中的li標簽水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; display:inline-block; } .tab_menu { list-style:none; /* 去掉ul前面的符號 */ margin: 0px; /* 與外界元素的距離為0 */ padding: 0px; /* 與內部元素的距離為0 */ width: auto; /* 寬度根據元素內容調整 */ } .tab_box { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 邊框 */ color: #dde4ec; /* 文字顏色 */ display: block; /* 此元素將顯示為塊級元素,此元素前后會帶有換行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 內部填充的距離 */ text-decoration: none; /* 不顯示超鏈接下劃線 */ white-space: nowrap; /* 對于文本內的空白處,不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。 */ } .selected { background-color: green; display: block; } .hide { display: none; } </style> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">選項卡1</li> <li>選項卡2</li> <li>選項卡3</li> </ul> </div><br><br><br> <div class="tab_box"> <div>選項卡1:這里是1號內容區域</div> <div class="hide">選項卡2:這里是2號內容區域</div> <div class="hide">選項卡3:這里是3號內容區域</div> </div> </div> <script> // 加上鼠標的點擊效果 $(function(){ $("ul li").click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) }) // 加上鼠標懸浮效果 $(function(){ $("div.tab_menu ul li").hover(function(){ $(this).addClass("selected").show(); // 下面的這個可以實現選項卡的聯動效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); },function(){ $(this).removeClass("selected").show(); // 下面的這個可以實現選項卡的聯動效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) }) </script> </body> </html>
實現的效果如下:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持綠夏網。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!