CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Just L
Just L

Reputation: 90

How to customize bootstrap tabs when active?

i try to make a website, when the one of bootstrap tabs was selected it will show just like their id name. but when the tab selected it cant set to active. so i think i can make custom active class to span when selected. So, how to customize tabs when it selected. maybe like change span bg color when selected

My bootstrap code, Someting like this

<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>

Upvotes: 0

Views: 5341

Answers (3)

Rohit Verma
Rohit Verma

Reputation: 3783

I think you want like this:-

$('.tabsBtn').on('click', '.btn', function(){
	$('.tabsBtn .btn').removeClass('activeClass');
	$(this).addClass('activeClass');
});
.activeClass{ background:green !important; color:#fff !important;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6 tabsBtn">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>

Upvotes: 1

Tahir Shahzad
Tahir Shahzad

Reputation: 649

in javascript/jQuery part you can add a class active on click and then using css add style

jQuery('.team-name').on('click',function(){
    jQuery(this).addClass('active');
    jQuery(this).siblings().removeClass('active');
}

In CSS

team-name.active{
    background-color:#efefef;
}

Upvotes: 0

samuellawrentz
samuellawrentz

Reputation: 1732

Instead of span you could use li. Only then bootstrap will be able to add active class to the active pill.

Also to style it, you must override the bootstrap's default styling. So give an id to the pill container and then you could overide the styles you wish.

For reference https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h

#pills li.active>a{
background:red;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div id= "pills" class="container">

  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

EDIT

Bootstrap only recognizes li for navigation between pills. View this line from their code https://github.com/twbs/bootstrap/blob/a5d48323a2bb4600fe6d53b5a881e1386e46e9ce/js/src/tab.js#L45

If you have to use span you must make alterations to this file which is not advisable. You can still style the li as you wish.

Upvotes: 1

Related Questions