使用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">名师教作文：３妙招巧写高分</a></li>
                    ...
                </ul>
                <ul>
                    <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
                    ...
                </ul>
            </div>
        </div>
    </div>
    <!--请将js代码写在这里哦  -->
</body>
 
</html>

大家发现小颖在html代码中写一段  如果你将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">名师教作文：３妙招巧写高分</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:;
            padding:;
            list-style: none;
        }
 
        body {
            background: #fff;
            font: normal 12px/22px 宋体;
        }
 
        img {
            border:;
        }
 
        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:;
        }
 
        .slideTxtBox .bd li {
            height: 24px;
            line-height: 24px;
        }
 
        .slideTxtBox .bd li .date {
            float: right;
            color: #999;
        }
    </style>