Download Simple Responsive Tab


Download9
Stock
File Size919.79 KB
Create DateNovember 15, 2016
Download

How to Create Simple Responsive Tab

This Tutorial will help to Increase jquery and responsive knowledge. This is simple jquery and responsive css.
here no use third party plugin. Enjoy!!

Create Navigation like below code

<div class="c-tabs-nav">
<a href="#home" class="c-tabs-nav__link is-active"><i class="fa fa-home"></i><span>Home</span></a>
<a href="#books" class="c-tabs-nav__link"><i class="fa fa-book"></i><span>Books</span></a>
<a href="#Favourites" class="c-tabs-nav__link"><i class="fa fa-heart"></i><span>Favourites</span></a>
<a href="#Calendar" class="c-tabs-nav__link"><i class="fa fa-calendar"></i><span>Calendar</span></a>
<a href="#Settings" class="c-tabs-nav__link"><i class="fa fa-cog"></i><span>Settings</span></a>
</div>

Use This Html Content

<div class="c-tab is-active c-tab__content" id="home"><h2>Welcome home!</h2><p><contet></p></div>
<div class="c-tab c-tab__content " id="books"><h2>All Books</h2><p><contet></p></div>
<div class="c-tab c-tab__content" id="Favourites"><h2>Your Favourites!</h2><p><contet></p></div>
<div class="c-tab c-tab__content" id="Calendar" ><h2>Stay Busy</h2><p><contet></p></div>
<div class="c-tab c-tab__content" id="Settings"><h2>Change It Up</h2><p><contet></p></div>

Create A Simple Script For animation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function(e) {
$(".c-tabs-nav > a").click(function(event){
event.preventDefault();
$(this).addClass("is-active");
$(this).siblings().removeClass("is-active");
var tab = $(this).attr("href");
$(".c-tab").addClass("is-active");
$(".c-tab").not(tab).removeClass("is-active");
});
}); </script>

Create A Simple Css For Style

.c-tabs-nav {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0}
.c-tabs-nav__link {-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:4px;padding:12px;color:#fff;background-color:#b3b3b3;text-align:center;-webkit-transition:color .3s;transition:color .3s}
.c-tabs-nav__link:last-child {margin-right:0}
.c-tabs-nav__link:hover {color:#6d6d6d}
.c-tabs-nav__link.is-active {color:#1d6dbe;background-color:#e7e7e7}
.c-tabs-nav__link i, .c-tabs-nav__link span {margin:0;padding:0;line-height:1}
.c-tabs-nav__link i {font-size:18px}
.c-tabs-nav__link span {display:none;font-size:18px}
.c-tab {display:none;background-color:#e7e7e7}.c-tab.is-active {display:block}
.c-tab__content {padding:1.5rem}
.c-tab .c-tab__content{display:none}
.c-tab.is-active .c-tab__content{display:block;}
.c-tabs.no-js .c-tab:last-child {margin-bottom:0}
.carbon-img, .carbon-wrap {margin:0 0 4px;display:block}
@media all and (min-width:720px) {
.c-tabs-nav__link i {margin-bottom:12px;font-size:22px}
.c-tabs-nav__link span {display:block}
}

Leave a Reply

Your email address will not be published. Required fields are marked *