twitter-bootstrap 我如何将整个引导面板制作为超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20364512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i make entire bootstrap panel as hyperlink
提问by user1447718
am using twitter bootstrap's panel component. i have below code
我正在使用 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>
how do i make the entire panel as hyperlink. like i should be able to click on any part of the panel and it should navigate to a different page.
如何将整个面板设为超链接。就像我应该能够点击面板的任何部分，它应该导航到不同的页面。
Online examples show making the footer as hyperlink, but i thought it would be better if i can make the entire panel a hyperlink.
在线示例显示将页脚设为超链接，但我认为如果我可以将整个面板设为超链接会更好。
i don't want to use metro.js.
我不想使用 Metro.js。
Thanks.
谢谢。
回答by Alan Thomas
Just wrap the whole panel in an anchor tag.
只需将整个面板包裹在一个锚标签中。
<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>
回答by stephenr85
Using an anchor tag around the element can mess up some layouts due to ancestor selectors in the stylesheet.
由于样式表中的祖先选择器，在元素周围使用锚标记可能会弄乱一些布局。
Using an anchor tag as the panel itself also may not inherit from the default panel styles.
使用锚标记作为面板本身也可能不会从默认面板样式继承。
The simplest solution with javascript is to put an attribute on the panel div, like href or data-href, then a global event listener (delegate).
使用 javascript 的最简单解决方案是在面板 div 上放置一个属性，如 href 或 data-href，然后是一个全局事件侦听器（委托）。
$(document).on('click', '.panel[data-href]:not(a)', function(){
window.location = $(this).attr('data-href');
});
回答by Mate
Try
尝试
$('.panel panel-info').click(function(e) {
e.preventDefault();
window.location = 'http://stackoverflow.com/';
});
Or setting panel's id
或者设置面板的id
<div class="panel panel-info" id="lnkPanel">
$('#lnkPanel').click(function(e) {
e.preventDefault();
window.location = 'http://stackoverflow.com/';
});
For .NET MVC 3 or 4 :
对于 .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: The page doesn't allow navigate, but you can see a full example
演示：该页面不允许导航，但您可以查看完整示例
