Twitter bootstrap 如何使整个引导面板成为超链接

我正在使用twitter引导的面板组件。我有下面的代码

<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

谢谢。

试试看

 $('.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/';
        });

$（'lnkPanel'）。单击（函数（e）{
e、 预防默认值（）；
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;
        });

var lnkDashboard='@Url.Action（“索引”、“仪表板”）；
$（'lnkPanel'）。单击（函数（e）{
e、 预防默认值（）；
window.location=lnkDashboard；
});

---

：页面不允许导航，但您可以看到完整的示例

只需将整个面板包装在锚定标记中即可

 <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，然后是一个全局事件侦听器（）

---

嗨，谢谢你的回复。我不想使用http://address，而是想使用>@Html.ActionLink（“我的队列”、“索引”、“仪表板”、null、null）。不管怎样，我能做到吗？@user1447718嗨，我猜你使用的是.net mvc 3或4。在这种情况下，请尝试使用Update@MaxGrass重新添加到jsfiddle上这看起来绝对是正确的解决方案@前辈们，有什么理由不这样吗？我在面板周围做了，把布局搞砸了。我在面板内的一个元素上试用了它，效果很好。@Adrian我的第一个猜测是默认情况下标记是内联元素，这可能是它弄乱布局的原因。如果你仔细研究的话，它应该是一个相当简单的CSS补丁。我唯一担心的是不要将整个面板包裹在锚定标记内，因为面板的某些部分可能无法单击，即如果不是每个元素都包裹在一起，请按照预期的链接进行操作。@AlanThomas我不记得我正在修补的具体项目，但更改标记的顺序为我解决了问题。我试图避免覆盖Bootstrap的CSS设置，因为我不想再记得我对后面的东西做了什么。是另一个有效的解决方案，没有任何变化。希望有帮助。

 $(document).on('click', '.panel[data-href]:not(a)', function(){
     window.location = $(this).attr('data-href');
 });