Here is my code, with bootstrap css
<br />
<ul class="nav nav-tabs"><br />
<li><a href="#aaa" data-toggle="tab">AAA</a></li><br />
<li><a href="#bbb" data-toggle="tab">BBB</a></li><br />
<li><a href="#ccc" data-toggle="tab">CCC</a></li><br />
</ul><br />
<div class="tab-content" id="tabs"><br />
<div class="tab-pane" id="aaa"><br />
...Content 1...<br />
</div><br />
<div class="tab-pane" id="bbb">...Content 2...</div><br />
<div class="tab-pane" id="ccc">...Content 3...</div><br />
</div>
-------------CSS---------
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: transparent;
border: 0px solid #ddd;
border-bottom: 5px solid red;
}
.nav>li>a {
position: relative;
display: block;
padding: 5px 15px;
}
Now while click on second tab, the bottom red to animate to another clicked tab.
AAA BBB CCC
---
Cliking BBB tab animate like this
AAA BBB CCC
.---
AAA BBB CCC
..---
AAA BBB CCC
...---
AAA BBB CCC
....---
AAA BBB CCC
......---
AAA BBB CCC
..........---
Here no dots to move underscore i used like this the spaces are vanished sry
Thanks in advance..........