添加類當前菜單選項卡

我使用以下3周不同的div之間切換..添加類當前菜單選項卡

退房工作DEMO。

我來脫膠試圖找到應用不同的背景顏色與當前所選菜單選項卡（包括網頁載入使用默認選項卡 - 「週刊」）的方法

這是不可能的添加一個類到一個類是什麼？

任何想法，我可以用jQuery做到這一點？

這裏是我的代碼...

的jQuery：

jQuery('.viewSchedule').click(function() { 
    var index = $(this).index(), 
    newTarget = jQuery('.targetSched').eq(index); 
    console.log(index+newTarget) 
    jQuery('.targetSched').not(newTarget).fadeOut('fast') 
    newTarget.delay('fast').fadeIn('fast') 
    return false; 
})

CSS：

.viewSchedule {} 
.viewBTN {display:block;width:auto;height:auto;padding:5px 10px 5px 10px;background:#ccc;color:#242424;cursor:pointer;border-radius:5px;float:left;margin-left:10px;font-family:dina,Arial, Helvetica, sans-serif;font-size:16px;text-align:center;} 
.viewBTN:hover {background:#FFF;color:#333;} 


.targetSched {display: none} 
.targetSched.first {display: block}

HTML：

<a class="viewSchedule" target="1"><span class="viewBTN">WEEKLY</span></a> 
<a class="viewSchedule" target="2"><span class="viewBTN">DAILY</span></a> 
<a class="viewSchedule" target="3"><span class="viewBTN">LIST</span></a> 

<br /><br /><br /><br /> 

<div id="sh-week" class="targetSched first">WEEKLY CONTENT</div> 
<div id="sh-daily" class="targetSched">DAILY CONTENT</div> 
<div id="sh-list" class="targetSched">LIST CONTENT</div>

來源

2014-06-24 Grant

可以將多個類添加到一個單一的元素。

DEMO

的JavaScript

jQuery('.viewSchedule').click(function() { 
     var index = $(this).index(), 
     newTarget = jQuery('.targetSched').eq(index); 

    $(".viewSchedule.active").removeClass("active"); 
    $(this).addClass("active"); 
    console.log(index+newTarget) 
     jQuery('.targetSched').not(newTarget).fadeOut('fast') 
     newTarget.delay('fast').fadeIn('fast') 
     return false; 
    })

CSS

.viewSchedule {} 
.viewBTN {display:block;width:auto;height:auto;padding:5px 10px 5px 10px;background:#ccc;color:#242424;cursor:pointer;border-radius:5px;float:left;margin-left:10px;font-family:dina,Arial, Helvetica, sans-serif;font-size:16px;text-align:center;} 
.viewBTN:hover {background:#FFF;color:#333;} 


.viewSchedule.active .viewBTN{ 
    background-color:red; 
    color:white; 
} 
.targetSched {display: none} 
.targetSched.first {display: block}

來源

2014-06-24 18:52:25

這將是不正確的。 '$（this）.addClass（「active」）;'會向鏈接添加一個類，而不是按鈕。看到我的答案。 –

目標是突出顯示活動按鈕 –

確切地說，要覆蓋按鈕樣式，您需要設置將類添加到'.viewBTN'範圍。 –

JSFiddle

的jQuery：

jQuery('.viewSchedule').click(function() { 
    $('.viewBTN').removeClass('selected'); 
    $(this).find('.viewBTN').addClass('selected'); 

    var index = $(this).index(), 
    newTarget = jQuery('.targetSched').eq(index); 
    jQuery('.targetSched').not(newTarget).fadeOut('fast') 
    newTarget.delay('fast').fadeIn('fast')   
    return false; 
})

CSS：

.selected {background: blue}

來源

2014-06-24 18:51:27

這不是關於誰是錯誤或正確，它只是關於什麼是解決方案。 +1爲您的嘗試，謝謝 –

很高興我可以幫助:) –

添加類當前菜單選項卡

回答

相關問題