How to Create Simple Responsive Tab

Simple Responsive Tab Jquery – Marathi Simplycode


Marathi

साधे Responsive Tab कसे बनवाल ??

हे प्रशिक्षण तुम्हला तुमचे jquery आणि css  च ज्ञान वाढवण्यास मदत करेल.  ह्यात कोणतेही दुसरे plugins वापरले नाहीत ..

खालील दिल्या प्रमाणे मेनू तयार करा.

<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>

खालील दिल्या प्रमाणे content साठी html चा वापर करा.

<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>

खालील दिल्या प्रमाणे animation साठी script वापरा

<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>

खालील दिल्या प्रमाणे css चा वापर करा

.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}
}

English

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}
}