ساخت تب مثله تب بلوک محبوب ترین مطالب بیست اسکریپت

[dadebaran 119]

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

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

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

 

 

$(document).ready(function($) {

$('.rightContents #rscriptlatest').click(function(){$(this).css({'background':'#adbec6','color':'#f2f6f9', });

$('.rightContents #rlearnlatest').css({'background':'#e1e7ef','color':'#abbbc4' });

$('.rightContents #rgraphiclatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.rightContents #learningLatestList').hide();

$('.rightContents #graphicLatestList').hide();

$('.rightContents #scriptLatestList').fadeIn(500);

});

$('.rightContents #rlearnlatest').click(function(){

$(this).css({'background':'#adbec6','color':'#f2f6f9'});

$('.rightContents #rscriptlatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.rightContents #rgraphiclatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.rightContents #graphicLatestList').hide();

$('.rightContents #scriptLatestList').hide();

$('.rightContents #learningLatestList').fadeIn(500);

});

$('.rightContents #rgraphiclatest').click(function(){

$(this).css({'background':'#adbec6','color':'#f2f6f9'});

$('.rightContents #rscriptlatest').css({'background':'#e1e7ef','color':'#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':'#f2f6f9'});

$('.leftContents #ltoplatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #lrandomlatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #topLatestList').hide();

$('.leftContents #randomLatestList').hide();

$('.leftContents #interviewLatestList').fadeIn(500);

});

$('.leftContents #ltoplatest').click(function(){

$(this).css({'background':'#adbec6','color':'#f2f6f9'});

$('.leftContents #linterviewlatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #lrandomlatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #interviewLatestList').hide();

$('.leftContents #randomLatestList').hide();

$('.leftContents #topLatestList').fadeIn(500);

});

$('.leftContents #lrandomlatest').click(function(){

$(this).css({'background':'#adbec6','color':'#f2f6f9'});

$('.leftContents #linterviewlatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #ltoplatest').css({'background':'#e1e7ef','color':'#abbbc4'});

$('.leftContents #interviewLatestList').hide();

$('.leftContents #topLatestList').hide();

$('.leftContents #randomLatestList').fadeIn(500);

});