我正在使用twitter bootstrap的面板组件。我有以下代码
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-text">My queue</p>
</div>
</div>
</div>
</div>
如何将整个面板作为超链接。就像我应该能够点击面板的任何部分，它应该导航到另一个页面。
在线示例显示将页脚作为超链接，但我认为如果我可以使整个面板成为超链接会更好。
我不想使用metro.js。
谢谢。
只需将整个面板包裹在锚标签中即可。
<a href="link.com">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-text">My queue</p>
</div>
</div>
</div>
</div>
</a>
只需将整个面板包裹在锚标签中即可。
<a href="link.com">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-6 text-right">
<p class="announcement-text">My queue</p>
</div>
</div>
</div>
</div>
</a>
由于样式表中的祖先选择器，在元素周围使用锚标记可能会弄乱一些布局。
使用锚标记作为面板本身也可能不会从默认面板样式继承。
使用javascript的最简单的解决方案是在面板div上放置一个属性，如href或data-href，然后是全局事件监听器（代表）。
$(document).on('click', '.panel[data-href]:not(a)', function(){
window.location = $(this).attr('data-href');
});
尝试
$('.panel panel-info').click(function(e) {
e.preventDefault();
window.location = 'http://stackoverflow.com/';
});
或者设置面板的ID
<div class="panel panel-info" id="lnkPanel">
$('#lnkPanel').click(function(e) {
e.preventDefault();
window.location = 'http://stackoverflow.com/';
});
对于.NET MVC 3或4：
<script type="text/javascript">
var lnkDashboard = '@Url.Action("Index", "Dashboard")';
</script>
$('#lnkPanel').click(function(e) {
e.preventDefault();
window.location = lnkDashboard;
});
DEMO ：页面不允许导航，但您可以看到完整的示例