javascript - How to make all the bootstrap panel clickable? - Stack Overflow

admin管理员组

文章数量:1424902

I want do a bootstrap panel clickable. But not the head clickable. ALL the panel clickable. I'm trying but when I add my div into <a> all content is linkable, and I dislike this text blue by links...

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

How can do my bootstrap panel clickable?

Thanks!

I want do a bootstrap panel clickable. But not the head clickable. ALL the panel clickable. I'm trying but when I add my div into <a> all content is linkable, and I dislike this text blue by links...

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

How can do my bootstrap panel clickable?

Thanks!

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jun 17, 2016 at 12:31 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jun 17, 2016 at 12:00 user3745888user3745888 6,3531515 gold badges4949 silver badges101101 bronze badges 2

• Is there a reason you're not using Lists for this? – Stubbies Commented Jun 17, 2016 at 12:04
• 2 "and I dislike this text blue by links" - then style it differently! – Turnip Commented Jun 17, 2016 at 12:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You could style it, and better if you could add a class for clickable ones so that will not affect others :

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

CSS :

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

Or if you don't want to use a tag you could add a CSS attribute cursor to the class panel that have data-href attribute that will make it clickable :

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

Then add data-href that contain the link you want to redirect to, example :

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

Then in your JS code add event :

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

Hope this helps.

$('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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn./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>

You could just remove all styling of links from your panel :

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

本文标签： javascriptHow to make all the bootstrap panel clickableStack Overflow