JQ简易标签切换的实现

很多时候咱们会遇到标签切换的要求，今天咱们就使用JQ制作一个简易标签切换。

要求是如下图所示，132是三个按钮，下面的大八叉是切换的位置。

首先咱们呢，需要布局和书写CSS代码：

<div class="main">
    <ul class="btn">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="box">
        <li><p>青格勒：这里是第一个div</p></li>
        <li><p>cenggel：这里是第二个div</p></li>
        <li><p>CGL：这里是第三个div</p></li>
    </ul>
</div>
<style>
    .main{ width:300px; margin:30px auto; border:1px solid #999;}
    .btn{ height:50px; line-height:50px;}
    .btn li{ float:left; width:100px; text-align:center; font-size:18px; cursor:pointer;}
    .btn li:hover{ background:#eee;}
    .btn li.on{ background:#eee;}
    .box li{ height:200px; padding:10px; display:none;}
</style>

为了更好地理解布局，咱们就简单一点。

然后献上咱们的JQ代码：

<script type="text/javascript">
    $(function () {
        //初始化
        $('.btn li:first').addClass('on');
        $('.box li:first').show();
        $('.btn li').click(function(){
            var liindex = $(this).index();//获取被点击按钮的索引值
            $(this).addClass('on').siblings().removeClass('on');
            $('.box li').eq(liindex).show().siblings().hide();
        });
    });
</script>

这段JQ代码还是很好理解的，初始化的部分为：

给第一个按钮一个on的选中classs。

给一个box一个显示的事件（刚开始咱们使用css的display:none;隐藏了）

然后每次点击按钮的时候获取他的索引值index，然后按照index的值操作下面容器的显示隐藏。

最终效果为如下图：