نحوه ساخت تب [بایگانی]

dadeBaran

شنبه 18 مهر 1394, 10:46 صبح

سلام و عرض ادب خدمت دوستان؛
همانطوری که از عنوان تاپیک معلومه ، میخوام تبی مثله تب بلوک محبوبترین مطالب بیست اسکریپت (http://20script.ir/) درست کنم ، با جاوا اسکریپت یه کاری کردم که فقط رنگ عوض میکنه اما نمیتونم مثله اون بالا و پایینش کنم میشه دوستان و اساتید بزرگوارمون اطلاعاتی در این خصوص دارند رو ارائه بدند. ممنون.
اینم کدی که من ساختم :

$(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);
});