find next li

by Kiran Duggal

HTML

<h1>CUSTOMIZE</h1>

<div>
    <ul class="nav nav-tabs">
        <li class="active"> <a href="#tab1">Show Tab 1</a>

        </li>
        <li> <a href="#tab2">Show Tab 2</a>

        </li>
        <li> <a href="#tab3">Show Tab 3</a>

        </li>
    </ul>
</div>
<section id="tab1" class="tab-content active">
    <div>Content in tab 1
        <input type="button" name="next" value="next">
    </div>
</section>
<section id="tab2" class="tab-content hide">
    <div>Content in tab 2
        <input type="button" name="next" value="next">
    </div>
</section>
<section id="tab3" class="tab-content hide">
    <div>Content in tab 3
        <input type="button" name="next" value="next">
    </div>
</section>

CSS

/** Start: to style navigation tab **/
 .nav {
    margin-bottom: 18px;
    margin-left: 0;
    list-style: none;
}
.nav > li > a {
    display: block;
}
.nav-tabs {
    *zoom: 1;
}
.nav-tabs:before, .nav-tabs:after {
    display: table;
    content:"";
}
.nav-tabs:after {
    clear: both;
}
.nav-tabs > li {
    float: left;
}
.nav-tabs > li > a {
    padding-right: 12px;
    padding-left: 12px;
    margin-right: 2px;
    line-height: 14px;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 18px;
    border: 1px solid transparent;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
    border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
    color: #555555;
    cursor: default;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
li {
    line-height: 18px;
}
.tab-content.active {
    display: block;
}
.tab-content.hide {
    display: none;
}
/** End: to style navigation tab **/

JavaScript

$(document).ready(function () {
    $('.nav-tabs > li > a').click(function (event) {
        event.preventDefault(); //stop browser to take action for clicked anchor

        //get displaying tab content jQuery selector
        var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

        //find actived navigation and remove 'active' css
        var actived_nav = $('.nav-tabs > li.active');
        actived_nav.removeClass('active');

        //add 'active' css into clicked navigation
        $(this).parents('li').addClass('active');

        //hide displaying tab content
        $(active_tab_selector).removeClass('active');
        $(active_tab_selector).addClass('hide');

        //show target tab content
        var target_tab_selector = $(this).attr('href');
        $(target_tab_selector).removeClass('hide');
        $(target_tab_selector).addClass('active');
    });

    $('.tab-content input').click(function (event) {
        $(".nav.nav-tabs li.active").next("li").find("a").trigger("click");
    });
});