JQ简易标签切换的实现

浏览: 293次 日期:2018年07月25日 19:48:36 作者:青格勒

很多时候咱们会遇到标签切换的要求,今天咱们就使用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的值操作下面容器的显示隐藏。

 

最终效果为如下图:

 

文章链接:http://cenggel.com/js/140.html

版权声明:文章《JQ简易标签切换的实现》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注