使用SuperSlide 實現標簽切換


小穎之前還寫過一篇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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM