我正在使用带有母版页的asp.net Web窗体的Bootstrap 3。在我的母版页面中,我在页面右侧有垂直nav-tabs
,单击按钮时会滑动。在那些个人nav-tabs
中,我有默认的水平Bootstrap nav-tabs
。我的问题是,我想使用Javascript动态添加/删除活动类。
在垂直标签中,我最初删除了class="active"
,并希望在点击它时将其添加到单独的垂直导航标签中。当我再次点击它时,它应该恢复原来的颜色。
这是主页面代码:
<div class="tab-pane tabPanes" id="rightTab1">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#rightTab1_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#rightTab1_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane tabPanes" id="rightTab2">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#rightTab2_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#rightTab2_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
</div>
<div class="row">
<ul class="nav nav-tabs tabs-right sideways">
<li id="nav1"><a href="#rightTab1" data-toggle="tab">Tab1</a></li>
<li id="nav2"><a href="#rightTab2" data-toggle="tab">Tab2</a></li>
</ul>
</div>
我的Javascript:
$(document).ready(function () {
$("#rightTab1").hide();
$("#rightTab2").hide();
$("#rightTab3").hide();
$("#nav1").click(function () {
if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":visible")) {
$("#rightTab1").delay(1000).show('slide', { direction: 'right' }, 500);
$("#rightTab2").hide('slide', { direction: 'right' }, 500);
}
else if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":hidden")) {
$("#rightTab1").show('slide', { direction: 'right' }, 500);
$("#rightTab2").hide('slide', { direction: 'right' }, 500);
}
else {
$("#rightTab1").hide('slide', { direction: 'right' }, 500);
$(".sideways li a").removeClass('active');
}
});
});
请帮帮我。提前谢谢。
答案 0 :(得分:1)
在点击中使用href,它将正常工作,请参阅此示例,无需自己编写jquery
$('[data-toggle^=pill]').click(function(e) {
if ($(this).parent().hasClass('active')) {
console.log($(this).parent().removeClass('active'))
console.log($($(this).attr('href')).removeClass('in active'))
} else {
$('[data-toggle^=pill]').parent().removeClass('active')
$('[class^=tab-pane]').removeClass('in active')
console.log($(this).parent().addClass('active'))
console.log($($(this).attr('href')).addClass('in active'))
}
e.stopPropagation();
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Pills</h2>
<ul class="nav nav-pills">
<li><a data-toggle="pill" href="#home">Home</a>
</li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a>
</li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 1 :(得分:0)
如果是ContentPlaceHolder1
#rightTab1_1 to #ContentPlaceHolder1_rightTab1_1
#rightTab1_2 to #ContentPlaceHolder1_rightTab1_2