如何使所有引导面板均可点击？

Question

我想做一个可点击的引导面板。 但头部不可点击。 所有面板均可单击。 我正在尝试，但是当我将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>

我的引导面板如何可点击？

谢谢！

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> 

Answer 2

您可以从面板中删除链接的所有样式：

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel panel-default"> <a href="#"> <div class="panel-body"> ... </div> <div class="panel-footer"> <div class="row"> ... </div> </div> </a> </div>