單擊時更改listitem中錨點的背景顏色

我有一個菜單，每個菜單中都帶有錨標記，由ul li構建。 Css應用於錨點和錨點：懸停但是，我希望選定的項目顯示它已被選中，並將背景變爲另一種顏色。主播：主動不起作用。單擊時更改listitem中錨點的背景顏色

我想JavaScript但尚未成功。這可以通過CSS來完成嗎？我看過很多例子，但沒有一個能夠正確運作。

JAVASCRIPT

<script type="text/javascript"> 
     function ChangeColor(obj) { 
     var li = document.getElementById(obj.id); 
     li.style.background = "#bfcbd6"; 
     } 
</script>

HTML

<div id="navigation"> 
     <ul> 
      <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li> 
      <li><a onclick="changecolor(this);" href="View.aspx">View</a></li> 
      <li><a onclick="changecolor(this);" href="About.aspx">About</a></li> 
     </ul> 
    </div>

CSS - 簡化

#navigation ul { 
    list-style-type: none; 
} 

#navigation li 
{ 
    float: left; 
} 

#navigation a 
{ 
    background-color: #465c71; 
} 

#navigation a:hover 
{ 
    background-color: #bfcbd6; 
}

來源

2012-10-17 TroyS

你不需要處理元素再次獲得ID。 obj引用實際元素。

<script type="text/javascript"> 
     function ChangeColor(obj) { 
     obj.style.backgroundColor = "#bfcbd6"; 
     } 
</script>

編輯：而javaScript is case sensitive，所以你應該檢查你函數名。

Here is a jsFiddle Demo

來源

2012-10-17 18:22:31 ocanal

@acanal事實上，做做現在的工作，謝謝，但之後改變背景顏色正在恢復爲CSS＃導航a中設置的主要顏色。你知道爲什麼嗎？ – TroyS

如果您的頁面在您點擊鏈接時發生變化，那麼您的頁面將全部變回默認狀態。這很正常。你不能用javascript做到這一點。你應該在服務器端做到這一點。例如主頁按鈕應設置爲Default.aspx上的活動按鈕。 – ocanal

@acanal好的，這是我會做的感謝。 – TroyS

我已經找到一種方法，使用JavaScript來解決這種情況。這適用於擁有MasterPage。只有在將其他選項卡ID設置爲空的情況下，更改選定選項卡的ID纔會引用該選項卡的css。

HTML

<div id="navbar"> 
    <div id="holder"> 
     <ul id="menulist"> 
      <li><a onclick="SelectedTab(this);" href="#" id="onlink" >Home</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="" >Products</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="">Services</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="">Gallery</a></li> 
      <li><a onclick="SelectedTab(this);" href="#" id="" >Contact</a></li> 
     </ul> 
    </div> 
</div>

的JavaScript

function SelectedTab(sender) { 
     var aElements = sender.parentNode.parentNode.getElementsByTagName("a");  
     var aElementsLength = aElements.length;  
     var index;  
     for (var i = 0; i < aElementsLength; i++)  
     { 
      if (aElements[i] == sender) //this condition is never true   
      { 
       index = i; 
       aElements[i].id="onlink" 
      } else { 
       aElements[i].id="" 
      } 
     } 
    }

CSS的標籤已被選定

#holder ul li a#onlink 
{ 
    background: #FFF; 
    color: #000; 
    border-bottom: 1px solid #FFF; 
}

來源

2012-10-18 18:45:52 TroyS

單擊時更改listitem中錨點的背景顏色

回答

相關問題