我如何将整个引导面板设置为超链接

Posted 2023-02-23

【中文标题】我如何将整个引导面板设置为超链接

【英文标题】：How do i make entire bootstrap panel as hyperlink

【发布时间】：2013-12-20 07:10:19

【问题描述】：

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

谢谢。

【参考方案1】：

试试

 $('.panel panel-info').click(function(e) 
        e.preventDefault();
        window.location = 'http://***.com/';
    );

或者设置面板的id

       <div class="panel panel-info" id="lnkPanel">


        $('#lnkPanel').click(function(e) 
            e.preventDefault();
            window.location = 'http://***.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 : 该页面不允许导航，但您可以查看完整示例

【讨论】：

您好，感谢您的回复。而不是使用 http:// 地址，我想使用 >@html.ActionLink("My queue", "Index", "Dashboard", null, null)。反正我能做到吗？

@user1447718 您好，我猜您使用的是 .net mvc 3 或 4。在这种情况下，请尝试更新

@MaxGrass 重新添加到 jsfiddle

【参考方案2】：

只需将整个面板包裹在一个锚标记中。

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

【讨论】：

这绝对是正确的解决方案。 @seniors，为什么不是这种情况？

我在面板周围做的，它弄乱了布局。我在面板内的一个元素上试了一下，效果很好。

@Adrian 我的第一个猜测是 标签默认是内联元素，这可能是它弄乱布局的原因。如果您研究一下，应该是一个相当简单的 CSS 修复。我唯一担心不将整个面板包裹在锚标签内是面板的某些部分可能无法点击，即。如果不是每个元素都被环绕，请按照预期的链接。

@AlanThomas 我不记得我正在修改的具体项目，但是更改标签的顺序为我解决了这个问题。我试图避免覆盖 Bootstrap 的 CSS 设置，因为我不想记住我对更进一步的事情做了什么。

here 是另一个可行的解决方案，没有任何变化。希望有所帮助。

【参考方案3】：

在元素周围使用锚标记可能会由于样式表中的祖先选择器而弄乱一些布局。

使用锚标记作为面板本身也可能不会继承默认面板样式。

使用 javascript 最简单的解决方案是在面板 div 上放置一个属性，例如 href 或 data-href，然后是一个全局事件侦听器 (delegate)。

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