小穎之前還寫過一篇jquery實現標簽切換的文章 jquery實現Tab選項卡菜單
今天小穎逛博客園時看到了用SuperSlide 實現標簽切換的文章,所以小穎就自己試了下,試了后發現SuperSlide真的很不錯,只有一行js代碼,哈哈哈,簡單方便,下面跟着小穎學習起來!
先看看效果圖吧嘻嘻
目錄:
············SuperSlide
··························js
····································jquery1.42.min.js
····································jquery.SuperSlide.2.1.1.js
··························demo.html
兩個js請大家移步 ☞SuperSlide 去下載
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery1.42.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script> </head> <body> <div class="main"> <div class="slideTxtBox"> <div class="hd"> <ul> <li>教育</li> <li>培訓</li> <li>出國</li> </ul> </div> <div class="bd"> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式發布!</a></li> ... </ul> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">名師教作文:3妙招巧寫高分</a></li> ... </ul> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亞八大名校招生說明會</a></li> ... </ul> </div> </div> </div> <!--請將js代碼寫在這里哦 --> </body> </html>
大家發現小穎在html代碼中寫一段 <!--請將js代碼寫在這里哦 --> 如果你將js代碼寫在 head 里面則頁面沒有效果哦,小穎的理解的是,因為放在head中的JS代碼會在頁面加載完成之前就讀取,而放在body中的JS代碼,會在整個頁面加載完成之后讀取。大家可以自己嘗試下把js代碼放在 head 和 body,然后看看有什么效果。
如果你要將js寫在 head 里面可以:
<head> <meta charset="utf-8"> <title></title> <script src="js/jquery1.42.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript"> $(function(){ jQuery(".slideTxtBox").slide(); }); </script> </head>
至於為什么大家看下,下面的示例我想大家就明白了啦
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery1.42.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript"> console.log(jQuery(".slideTxtBox")); </script> </head> <body> <div class="main"> <div class="slideTxtBox"> <div class="hd"> <ul> <li>教育</li> <li>培訓</li> <li>出國</li> </ul> </div> <div class="bd"> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式發布!</a></li> ... </ul> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">名師教作文:3妙招巧寫高分</a></li> ... </ul> <ul> <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亞八大名校招生說明會</a></li> ... </ul> </div> </div> </div> <!--請將js代碼寫在這里哦 --> <script type="text/javascript"> console.log(jQuery(".slideTxtBox")); </script> </body> </html>
執行結果:
在 head 里面執行 jQuery(".slideTxtBox").slide(); 時,class名為 slideTxtBox 的div還沒有加載出來,所以頁面沒有切換標簽的效果,在 body 里最后一行執行 jQuery(".slideTxtBox").slide(); 時,class名為 slideTxtBox 的div已經加載出來了,所以頁面有切換標簽的效果。
Webkit內核渲染DOM過程是根據文檔順序加載的(注意:<script>也屬於DOM元素),所以,你這個場景下,將<script>放在body最后,只是為了在上方元素加載完成后執行罷了,和$(function(){ /****/ }) 或者 window.onload目的相同,但會先於$(function(){ /****/ })執行。
另外$(function(){ /****/ })的做法比window.onload = function(){ /****/ } 的好處在於,$(function(){ /****/ })可以在不同位置聲明多個,執行順序以DOM加載順序。window.onload = function(){ /****/ } 每次出現都會覆蓋之前所有的,故在整個js上下文,只能出現一次。 而且 window.onload 和 $(function(){}) 會互相覆蓋,以誰后執行為准。但是window.onload 優於 $(function(){ }) 的非常重要的一點是,它可以脫離jquery。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery1.42.min.js" type="text/javascript"></script> <script type="text/javascript"> console.log(11111); $(function() { console.log(22222); }); </script> </head> <body> <script type="text/javascript"> console.log(33333); </script> </body> </html>
還有一點需要注意:一定要先引用 “jquery1.42.min.js”然后再引用 “jquery.SuperSlide.2.1.1.js”,否則就會出現
js代碼:
<script type="text/javascript"> jQuery(".slideTxtBox").slide(); </script>
css代碼:
<style media="screen"> * { margin: 0; padding: 0; list-style: none; } body { background: #fff; font: normal 12px/22px 宋體; } img { border: 0; } a { text-decoration: none; color: #333; } a:hover { color: #1974A1; } .main { width: 600px; margin: 10px auto; } .slideTxtBox { width: 450px; border: 1px solid #ddd; text-align: left; } .slideTxtBox .hd { height: 30px; line-height: 30px; background: #f4f4f4; padding: 0 10px 0 20px; border-bottom: 1px solid #ddd; position: relative; } .slideTxtBox .hd ul { float: left; position: absolute; left: 20px; top: -1px; height: 32px; } .slideTxtBox .hd ul li { float: left; padding: 0 15px; cursor: pointer; } .slideTxtBox .hd ul li.on { height: 30px; background: #fff; border: 1px solid #ddd; border-bottom: 2px solid #fff; } .slideTxtBox .bd ul { padding: 15px; zoom: 1; } .slideTxtBox .bd li { height: 24px; line-height: 24px; } .slideTxtBox .bd li .date { float: right; color: #999; } </style>