使用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>