主動類菜單HTML-CSS-JS不工作

我不知道我做錯了什麼。一旦從菜單的一個選項切換到另一個選項，我想要菜單的顏色改變顏色。這是我有：主動類菜單HTML-CSS-JS不工作

$(document).ready(function() { 
 
     $('ul li a').click(function() { 
 
     $('li a').removeClass("#menu .current_page_item a"); 
 
     $(this).addClass("#menu .current_page_item a"); 
 
     }); 
 
    });

#menu li:hover a, 
 
#menu li.active a, 
 
#menu li.active span { 
 
    background: #2980b9; 
 
    color: rgba(255, 255, 255, 1); 
 
} 
 
#menu .current_page_item a { 
 
    background: #2980b9; 
 
    color: rgba(255, 255, 255, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <ul> 
 
    <li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a> 
 
    </li> 
 
    <li><a href="staging.html" accesskey="2" title="Staging">Staging Form</a> 
 
    </li> 
 
    <li><a href="UAT.html" accesskey="4" title="">UAT</a> 
 
    </li> 
 
    <li><a href="PILOT.html" accesskey="8" title="">PILOT</a> 
 
    </li> 
 
    <li><a href="#" accesskey="5" title="">PROD</a> 
 
    </li> 
 
    <li><a href="#" accesskey="7" title="">Remediation</a> 
 
    </li> 
 
    </ul> 
 
</div>

感激，如果有人能幫助我！

來源

2016-10-25 ripepe

我發現代碼中的2個問題：

1）RemoveClass和Addclass不應包含特殊字符。這不是CSS選擇器。這只是你可以傳入的類價值。在你的代碼中，你把這個id放在了類名之前。替換：$('li a').removeClass("#menu .current_page_item a");與removeClass("current_page_item")

2）當你點擊，它是被點擊，而不是<li>的<a>，所以你必須把parent()爲了目標的addClass到<li>

這裏是你完成代碼片段：

#menu li:hover a, #menu li.active a, #menu li.active span 
 
{ 
 
    background: #2980b9; 
 
    color: rgba(255,255,255,1); 
 
}  
 

 
#menu .current_page_item a 
 
{ 
 
    background: #2980b9; 
 
    color: rgba(255,255,255,1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
<ul> 
 
<li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a></li> 
 
<li><a href="#" accesskey="2" title="Staging">Staging Form</a>   </li> 
 
<li><a href="#" accesskey="4" title="">UAT</a></li> 
 
<li><a href="#" accesskey="8" title="">PILOT</a></li> 
 
<li><a href="#" accesskey="5" title="">PROD</a></li> 
 
<li><a href="#" accesskey="7" title="">Remediation</a></li> 
 
    
 

 
<script> 
 
$(document).ready(function(){ 
 
$('ul li a').click(function(){ 
 
$('ul li').removeClass("current_page_item"); 
 
$(this).parent().addClass("current_page_item"); 
 
}); 
 
}); 
 
</script>

來源

2016-10-25 16:02:01 TSR

-1

我認爲這將有助於..請告訴我們，如果它仍然didnt解決

$（ '禮'）removeClass（「current_page_item。」）。 $（this）.addClass（「。current_page_item」）;

，而不是這樣的：

$（ '禮'）removeClass（「＃菜單.current_page_item了」）; $（this）.addClass（「＃menu .current_page_item a」）;

來源

2016-10-25 15:31:49

[？我如何格式化我的代碼塊（http://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-塊） –

抱歉邁克我沒有得到你的問題。你能解釋 –

我正在鏈接到一個元堆棧溢出問題，它可以幫助你像代碼格式化你的代碼，而不是純文本。比較你的代碼的外觀與代碼在@ D.Mllr的答案中的外觀。 –

-1

JavaScript有一些問題。

首先，你的班級在「li」標籤上，而不是「a」標籤。因此，我們必須添加並從這些標籤中移除。

其次，removeClass和addClass函數只接受類名稱，而不是完整路徑。

修復這些問題後，您的代碼應該運行得很好！更改後

的JavaScript：

$(document).ready(function(){ 
    $('ul li').click(function(){ 
     $('li').removeClass("current_page_item"); 
     $(this).addClass("current_page_item"); 
    }); 
});

JSFIDDLE EXAMPLE

來源

2016-10-25 15:57:24

請在添加評論時，我的答案可以在downvoting時得到改進，所以我可以在將來的答案中更清楚:) –

主動類菜單HTML-CSS-JS不工作

回答

相關問題