طراحی باکس وب تب دار با jQuery (بدون افزونه)

در مطلب قبلی ما یک باکس وب ساده رو طراحی کردیم و برای این مطلب تصمیم گرفتیم این باکس رو به صورت منوی تب دار طراحی کنیم تا کاربران عزیز استفاده بیشتر و بهتری از این کد داشته باشن،برای این کار ساختار کد‌ها رو تغییر دادیم و کمی هم کد اضافه کردیم، پس با سون لرن همراه باشید.

دموی باکس وب با منوی تب دار (اختصاصی سون لرن)

بخش HTML

<div class="box">
 <ul class="tabs">
 <li><a href="#content1" class="active" >آخرین ها</a></li>
 <li><a href="#content2" >پربازدید ها</a></li>
 <li><a href="#content3" >تصادفی</a></li>
 </ul>
 <div class="content">
 <div id="content1">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 <div id="content2">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 <div id="content3">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 </div>
 </div>

کد‌های HTML به صورت بالا تغییر دادیم،کلاس box از آموزش قبلی باقی مونده،ما یه لیست نامرتب برای گزینه‌های منو  اضافه کردیم و عناوین مورد نظر رو براش مشخص کردیم؛برای قسمت محتوای هر تب یه تگ div مشخص کردیم و یه شناسه با عنوان مثلا content1 یا content2 و ... بهش اختصاص دادیم و همه اینارو داخل یه تگ div دیگه با کلاس content قرار دادیم،توجه کنید که برای تگ‌های لینک قسمت منو مقدار خاصیت href رو برابر شناسه هر کدوم از تگ‌های div داخل تگ div با کلاس content قرار دادیم.داخل هر کدوم از محتوا‌ها هم یه لیست ایجاد کردیم که قراره لیست محصولا یا مطالب یا هر چیز دیگه رو به کاربر نشون بده (خلاصه محتوای مورد نظر خودتون داخلش قرار میگیره).

کد‌های jQuery

jQuery(document).ready(function(){

 jQuery('.content div:not(:first)').hide();

 jQuery('ul.tabs li a').on('click',function(){
 if(jQuery(this).hasClass('active')){return false;}
 jQuery('ul.tabs li a').removeClass('active');
 jQuery(this).addClass('active');
 var href=jQuery(this).attr('href');
 var split=href.split('#');
 jQuery('.content div').hide();
 jQuery('.content div#'+split[1]).slideDown(300);
 return false;
 });

});

خوب در قسمت کد‌های جاوا اسکریپت اول از همه تگ‌های داخل تگ content رو به جز اولی مخفیشون کردیم.بعدش برای رویداد کلیک روی هر کدوم از لینک‌های قسمت منو (تگ ul) تابعی رو نوشتیم که داخل این تابع مشخص کردیم اگه لینکی که داره کلیک میشه همین لینک هست هیچ کاری انجام نده (برای جلوگیری از بارگذاری مجدد کد‌ها مخصوصا اگه برای دریافت محتوا  از ای جکس استفاده بشه)،بعدش از همه لینک‌ها کلاس active رو برداشتیم (برای اینه که لینک فعال قبلی رو غیر فعال کنیم) و به لینک فعلی کلاس active رو اضافه کردیم،بعد ما مقدار خاصیت href لینک فعلی رو گرفتیم و داخل متغییر href قرار دادیم حالا href رو با دستور split به یه آرایه خرد کردیم (توی قسمت html توضیح دادیم که خاصیت href رو با مقداری شبیه content1 یا content2 و ... مشخص کردیم،این کار به این خاطر بود که موقع کلیک کردن روی لینک‌ها مشخص کنیم کدوم تگ content لود بشه)،بعد ما تمام تگ‌های div داخل content رو مخفی میکنیم و با دستور بعدی content مورد نظر رو لود میکنیم (با توجه به کد،مقدار اندیس 1 آرایه split مقادیری مثل content1 یا content2 و ... داره بنابراین کد یه خط مونده با آخر این مقدار رو دریافت میکنه و تگ مورد نظر رو با افکت slideDown نشون میده،خواستین افکت‌های دیگه هم بذارید(مثل fade یا bounce)).

کد‌های CSS

کد‌های استایل رو با توجه به سلیقه خودتون می‌تونید تغییر بدید.

.tabs{
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top:-29px;
 right:-1px;

}
.tabs li{
 float: right;
 margin-left: 3px;
}
.tabs li a{
 text-decoration: none;
 font-size:10pt;
 padding:6px 15px;
 background-color:#a00;
 color:#FFF;
}
.tabs li a.active{
 background-color:#0a0;
 color:#FFF;
}
.content div{
 margin-top:5px;
 font-size: 9pt;
 padding: 5px;
}
.post-list{
list-style: none;
margin-right: 10px;
}
.post-list li{
 padding-top: 10px;
}
.post-list li a{
 text-decoration: none;
 color:#888;
 font-size: 10pt;
 transition: all .1s;
 -webkit-transition: all .1s;
 -moz-transition: all .1s;
 -o-transition: all .1s;
 -ms-transition: all .1s;
}
.post-list li a:hover{
 background-color: #a00;
 padding: 5px 15px;
 color:#FFF;
 border-radius: 3px;
 font-weight: bold;
}

امیدوارم که مفید باشه براتون 🙂

دانلود سورس کد

نویسنده

کیوان علی محمدی

یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.