bootstrap滑动门链接可点击

首先放入一个bootstrap的标签页效果

<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true" data-href="/Class_1/Default.aspx">新政解读</a></li>
<li><a href="#home1" data-toggle="tab" data-href="/Class_2/Default.aspx">个人服务</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
...
</div>
<div role="tabpanel" class="tab-pane fade" id="home1>
...
</div>
</div>

此处nav-tabs li a上的data-href属性是自加上的，原标签页效果无此属性，data-href填写为要跳转的链接地址

然后再页面山加入下面的js

<script>
$(".nav-tabs li a").click(function(){
	if($(this).parent().hasClass("active"))
		window.location.href=$(this).data("href");
})
</script>

在css文件中加入下面样式

ul.nav-tabs li.active a:hover { text-decoration:underline; cursor:pointer;}

即可

这个好。    

感谢分享！

这个不错,试下看

用此标签，可以将滑动门父级加上链接，避免父级因为子栏目不能有链接。

在bootstrap 4中，标签进行了修改，JS需要这样引用才有效：

//即去除prant

<script>
    $(".nav-tabs li a").click(function () {
        window.location.href = $(this).data("href");
    })
</script>

在bootstrap 4.5后，则需要改为：

<script>
$('.nav-tabs li a').on('click',function(e){
	e.preventDefault()
	if($(this).hasClass('active')){
		window.location.href = $(this).data("href");			
	}
	$(this).tab('show')        
})    
</script>