jQuery 选项卡滑动切换效果

今天这篇 jQuery 选项卡滑动切换效果和那篇文章很类似，也算是一种标签切换，可以直接看看效果，如下：

现在就让我们看看实现的过程，首先看看 html 代码：

<div id="category" class="category boxshadow">
    <ul class="nav">
        <li>
            <a id="nvajquery" class="current" href="#jquery">jQuery</a>
        </li>
        <li>
            <a id="nvacss" href="#css">Css</a>
        </li>
    </ul>        	
    <div id="category-list"> 
        <ul id="jquery" class="nav-list"> 
            <li>
                <a href="">jQuery学习大总结(二)jQuery选择器完整介绍</a>
            </li>
            <li>
                <a href="">jQuery对元素进行拖动并重新排序</a>
            </li>
        </ul>
        <ul id="css" class="nav-list" style="display:none;">
            <li>
                <a href="">css遮罩代码</a>
            </li>
        </ul> 
    </div>
</div>

我们的目标很明确，当点击 class 名为"nav" 的无序列表中的标签时，根据锚的值显示 class 名为 "nav-list" 中的内容，切换效果为本篇的重点：jQuery 滑动切换效果。

经过对样式的一番调整，最终如下：

.category {
    width:336px;
    background: none repeat scroll 0 0 #EEEEEE;
    margin-bottom: 6px;
    overflow: hidden;
    text-align: center;
}
.nav{
    border-bottom:1px solid #666;
    background:#50A3E5 none repeat scroll 0 0;
    line-height:30px
}
    
.nav li a{color:#FFF;padding:5px 40px;text-decoration: none;}
.nav li a:hover{background-color:#3991D6}
.current{background-color:#74B8ED}

.category .nav li{display:inline}
#category-list{display:block}
.nav-list li{line-height:28px}
.nav-list li a{
    display:block;
    border-bottom:1px solid #d3d3d3;
    color:Black;
    font-size:14px;
    padding:3px;
    text-align:left;
    text-decoration: none;
}
.nav-list li a:hover{
    background-color:#50A3E5;
    color:#FFF
}
.nav-list li:last-child a{border-bottom:0}

li:last-child{border-bottom:none;} 中我们使用了 "last-child" 选择器去除最后一个 li 的下边框，这里需要注意的是在 IE6 下这个选择器是无效的。当然，在这里 IE6下即使有下边框也不要紧，jQuery学习站也不再考虑 IE6 的兼容问题。

接下来，我们编写 jQuery 代码来完成 滑动效果，首先引入 jQuery 文件，如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

jQuery 1.5.1 开发版可以在 jQuery 1.5 vsdoc 下载这篇文章中找到。jQuery 实现如下，代码中做了相应的注释：

<script type="text/javascript">
    $(document).ready(function() {
        //a标签点击事件
        $(".nav a").click(function() {
            //保存选择器
            var $a = $(this);
            //如果是当前标签，直接返回
            if ($a.hasClass("current")) {
                return false;
            }

            //为当前点击的标签添加 current 样式
            $(".current").removeClass("current");
            $a.addClass("current");

            //slideUp 所有内容
            $(".nav-list").slideUp();
            var id = $a.attr("href").split("#")[1];
            //slideDown 当前内容
            $("#" + id).slideDown();
        });
    });    
</script>

到这里就实现了基于 jQuery 的选项卡滑动切换效果，大家可以去演示页看看效果，当然本篇中的样式可以做进一步的修改，最终可以将这个效果运用于具体的产品中。

看看效果：http://demo.vs2010.com/jquerytab/