javascript - bootstrap 如何给标签页 右侧动态添加按钮
本文介绍了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屋!
查看全文