如何将整个引导面板作为超链接

Question

我正在使用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.

谢谢.

Answer 1

只需将整个面板包裹在锚标签中即可.

 <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>

Answer 2

尝试

 $('.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：该页面不允许导航，但您可以看到完整的示例