javascript - 如何使所有 Bootstrap 面板均可点击？

Question

我想做一个可点击的 Bootstrap 面板。但头部不可点击。所有面板均可点击。我正在尝试，但是当我将 div 添加到 <a> 时所有内容都是可链接的，我不喜欢链接的蓝色文本...

<div class="panel panel-default">
    <a href="#">
        <div class="panel-body">
            ...
        </div>
        <div class="panel-footer">
            <div class="row">
              ...
            </div>
        </div>
    </a>
</div>

如何使我的 Bootstrap 面板可点击？

谢谢!

Answer 1

您可以设置它的样式，如果您可以为可点击的类添加一个类，这样就不会影响其他类，那就更好了:

<div class="panel panel-default clickable-panel" data-href=''>
    ...
</div>

CSS:

.clickable-panel a:hover, .clickable-panel a:active {
   color: #000;
   text-decoration: none;
}

或者如果您不想使用 a标签您可以添加 CSS 属性 cursor上课panel有 data-href使其可点击的属性:

.panel[data-href]{
    cursor: pointer !important;
}

然后添加data-href包含您要重定向到的链接，例如:

<div class="panel panel-default" data-href=''>
    ...
</div>

然后在你的JS代码中添加事件:

$('body').on('click', '.panel[data-href]', function(){
    if(window.location.hash) {
        window.location.hash = $(this).data('href');
    } else {
        window.location.href = $(this).data('href');
    }
})

希望这有帮助。

$('body').on('click', '.panel[data-href]', function(){
  if(window.location.hash) {
    window.location.hash = $(this).data('href');
  } else {
    window.location.href = $(this).data('href');
  }
})

.panel[data-href]{
  cursor: pointer !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" data-href='#test'>
  <div class="panel-body">
     Go to test div
  </div>
  <div class="panel-footer">
    <div class="row">
      ...
    </div>
  </div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<div id='test'>
  TEST DIV
</div>