ساخت تب

[محمد دریابیان 70]

سلام و عرض ادب خدمت دوستان؛

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

اینم کدی که من ساختم :

$(document).ready(function($) {
$('.rightContents #rscriptlatest').click(function(){$(this).css({'ba ckground':'#adbec6','color':'#f2f6f9', });
$('.rightContents #rlearnlatest').css({'background':'#e1e7ef','color ':'#abbbc4' });
$('.rightContents #rgraphiclatest').css({'background':'#e1e7ef','col or':'#abbbc4'});

$('.rightContents #learningLatestList').hide();
$('.rightContents #graphicLatestList').hide();
$('.rightContents #scriptLatestList').fadeIn(500);
});
$('.rightContents #rlearnlatest').click(function(){
$(this).css({'background':'#adbec6','color':'#f2f6 f9'});
$('.rightContents #rscriptlatest').css({'background':'#e1e7ef','colo r':'#abbbc4'});
$('.rightContents #rgraphiclatest').css({'background':'#e1e7ef','col or':'#abbbc4'});

$('.rightContents #graphicLatestList').hide();
$('.rightContents #scriptLatestList').hide();
$('.rightContents #learningLatestList').fadeIn(500);
});
$('.rightContents #rgraphiclatest').click(function(){
$(this).css({'background':'#adbec6','color':'#f2f6 f9'});
$('.rightContents #rscriptlatest').css({'background':'#e1e7ef','colo r':'#abbbc4'});
$('.rightContents #rlearnlatest').css({'background':'#e1e7ef','color ':'#abbbc4'});

$('.rightContents #learningLatestList').hide();
$('.rightContents #scriptLatestList').hide();
$('.rightContents #graphicLatestList').fadeIn(500);
});
/************************************************** ******/
$('.leftContents #linterviewlatest').click(function(){
$(this).css({'background':'#adbec6','color':'#f2f6 f9'});
$('.leftContents #ltoplatest').css({'background':'#e1e7ef','color': '#abbbc4'});
$('.leftContents #lrandomlatest').css({'background':'#e1e7ef','colo r':'#abbbc4'});

$('.leftContents #topLatestList').hide();
$('.leftContents #randomLatestList').hide();
$('.leftContents #interviewLatestList').fadeIn(500);
});
$('.leftContents #ltoplatest').click(function(){
$(this).css({'background':'#adbec6','color':'#f2f6 f9'});
$('.leftContents #linterviewlatest').css({'background':'#e1e7ef','c olor':'#abbbc4'});
$('.leftContents #lrandomlatest').css({'background':'#e1e7ef','colo r':'#abbbc4'});


$('.leftContents #interviewLatestList').hide();
$('.leftContents #randomLatestList').hide();
$('.leftContents #topLatestList').fadeIn(500);
});
$('.leftContents #lrandomlatest').click(function(){
$(this).css({'background':'#adbec6','color':'#f2f6 f9'});
$('.leftContents #linterviewlatest').css({'background':'#e1e7ef','c olor':'#abbbc4'});
$('.leftContents #ltoplatest').css({'background':'#e1e7ef','color': '#abbbc4'});

$('.leftContents #interviewLatestList').hide();
$('.leftContents #topLatestList').hide();
$('.leftContents #randomLatestList').fadeIn(500);
});

[Black_Sky 6349]

اون قسمت چیز خاصی نداره که ؟

نمونه های زیادی هست و شما باید فقط بهش استایل مدنظر بدید

مثلا :https://jqueryui.com/tabs/

و یا اگر از Bootstrap استفاده میکنید از

http://getbootstrap.com/components/#nav-tabs

استفاده کنید

البته با کمی ویرایش

[محمد دریابیان 70]

اینا رو قبلاً دیدم اما من زیاد کدنویسی بلد نیستم فقط طراحی و برنامه نویسی تحت ویندوزم خوبه

اونا هم مثله اون نبودن ، همونظوری هم که اون بالا گفتم من ساختمش اما مثل اون افکت نداره و فقط رنگ عوض میکنه ،

یه مشکلی هم که هست اینه پیشفرض نمیشه یعنی هر موقع ریفرش شد باید مجدداً روی یکی کلیک کرد تا اطلاعات اون به نمایش دربیاد.