javascript - bootstrap 如何给标签页 右侧动态添加按钮

查看:112
本文介绍了javascript - bootstrap 如何给标签页 右侧动态添加按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

1、怎么实现给标签页右侧添加按钮

2、


    <div class="panel panel-default">
                  <div class="panel-heading">
                      <ul id="myTab" class="nav nav-tabs">
                           <li class="active">
                              <a href="#home" data-toggle="tab">
                             查看
                              </a>                          
                           </li>
                           <li><a href="#suspect" data-toggle="tab">ios</a></li>
                           <li style="float:right;"><a href="#" class="edit" data-toggle="tab">编辑</a></li>
                           <li style="float:right;display:none;"><a href="#" class="add" data-toggle="tab">添加</a></li>
                    </ul>
                  </div>
</div>

js

$('#myTab a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
        var caseLi2 = $("li")[1];
        if(caseLi2.className == 'active'){
            $('.add').css("display","block");
            $('.edit').css("display","none");
        }
    })

3、具体实现的效果是这样的

当我点击案件查看时,显示右侧编辑,当我点ios时标签页右侧显示添加
通过js控制一直不能实现

解决方案

不动你的结构的情况下:

$('#myTab a').slice(0, 2).click(function() {
    $(this).closest('li').addClass('active').siblings().removeClass('active');
    $('#myTab li').slice(2, 4).hide().eq($(this).closest('li').index()).show();
})

这篇关于javascript - bootstrap 如何给标签页 右侧动态添加按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆