Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://prazdniq.ru/test2/assets/template/card/css/style.css" rel="stylesheet" type="text/css" //>  
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<div class="container">
  <div class="row">
    
    <h1>Bootstrap Tabs</h1>
  
  <div class="tabbable">
<div class="contentTabs noticeTabs">
<div class="contentTabsDiv">
    <ul><li><a class="contentTabBtn active" href="#aaa" aria-controls="home" role="tab" data-toggle="tab">1</a></li>
<li>
    <a class="contentTabBtn" href="#bbb" aria-controls="home" role="tab" data-toggle="tab">2</a>
        </li><li><a class="contentTabBtn" href="#ccc" aria-controls="home" role="tab" data-toggle="tab">3</a></li>
    </ul>
</div>
    
    <div class="tab-content">
      <div class="tab-pane active" id="aaa">
        <p>I'm in Section 1.</p>
      </div>
      <div class="tab-pane" id="bbb">
        <p>I'm in Section 2.</p>
      </div>
      <div class="tab-pane" id="ccc">
        <p>I'm in Section 3.</p>
      </div>
    </div>
    </div>
    
    </div>
</div>
  
  
</body>
</html>
 
/* demo only css */
​
.container {padding:5%;}
@import url('https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
​
.container {
    margin-top: 10px;
}
.contentTabs {
    width:100%;
}
.contentTabs a {
  color: #0075c5;
  cursor: pointer;
  font-size: 14px;
  /* padding: 10px 15px 10px 15px; */
  text-decoration: underline;
  /* display: table-cell; */
  text-align: center;
}
.noticeTabs a {
  font-size: 13px;
  height: 40px;
  line-height: 40px;
  /* padding: 0px 15px 0px 15px; */
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
​
li {
  line-height: 20px;
  width: 33%;
  display: inline-block;
}
.contentTabs ul {
  width: 100%;
  margin: 0;
  padding: 0;
  /* text-align: center; */
}
.contentTabsDiv {
  width: 100%;
  text-align: center;
}
.contentTabBtnCell {
    width:100%;
}
 
  
// http://stackoverflow.com/a/12138756/1004312
​
 var hash = window.location.hash;
  hash && $('.contentTabsDiv a[href="' + hash + '"]').tab('show');
​
​
​
  $('.contentTabsDiv a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers