Ändra bakgrund på endast en länk mha javascript

Okej, dålig rubrik men kom inte riktigt på hur jag skulle förklara det med få ord.

Jag har en lista

<ul>
<li><a href="#" onclick="ajaxFunction('bild1.jpg', this)"><img src="images/bild1_small.jpg" /></a></li>
<li><a href="#" onclick="ajaxFunction('bild2.jpg', this)"><img src="images/bild2_small.jpg" /></a></li>
<li><a href="#" onclick="ajaxFunction('bild3.jpg', this)"><img src="images/bild3_small.jpg" /></a></li>
<li><a href="#" onclick="ajaxFunction('bild4.jpg', this)"><img src="images/bild4_small.jpg" /></a></li>
<li><a href="#" onclick="ajaxFunction('bild5.jpg', this)"><img src="images/bild5_small.jpg" /></a></li>
</ul>

När jag klickar på någon av länkarna skickar jag med en referens (this) till ajaxFunction.
Det jag sedan gör i den funktionen är

<script language="javascript" type="text/javascript">
	<!-- 
	//Browser Support Code
	function ajaxFunction(pic, ele){

		// ... en massa kod som är oviktig ...
		
		ele.style.background='#88e0e1';
		
		// ... en massa kod som är oviktig ...
	
	//-->
</script>

Då byter den bakgrundsfärg på det a-elementet jag skickade in till funktionen. Allt funkar fint men jag skulle vilja att det endast är den senaste länken man klickade på som får en annan färg. De andra länkarna ska gå tillbaka till sin normala bakgrundsfärg.

Något tips på hur jag kan lösa det?

Tusen tack på förhand! :bire

Några alternativ på hur man skulle kunna göra:

1. Varje <a> har ett id. Vid onclick jämförs det klickade elementets id mot alla andra; där det stämmer överens sätter du färg 1 och där det inte stämmer överens sätter du färg 2. Kod:

function changeColor(currentElm, colorIfMatch, colorIfNotMatch)
{
  var ids = ["a1", "a2", "an"];
  for (var i = 0; i < ids.length; ++i)
  {
    if (currentElm.id != ids[i])
      document.getElementById(ids[i]).style.backgroundColor = colorIfNotMatch;
  }
  currentElm.style.backgroundColor = colorIfMatch;
}

...ovanstående array är ju lätt att skapa om koden genereras med PHP (som jag gissar att du använder). Lite jobbigare dock om man manuellt måste uppdatera dylikt ;)

2. Om alla länkar i <ul> skall byta färg kanske följande kan fungera:

function changeColor(currentElm, colorIfMatch, colorIfNotMatch)
{
  var elm = currentElm, ul = null;
  while (elm.parentNode)
  {
    if (elm.parentNode.nodeName.toUpperCase() == "UL")
    {
      ul = elm.parentNode;
      break;
    }
    elm = elm.parentNode;
  }
  if (ul)
  {
    var a = ul.getElementsByTagName("A");
    if (a)
    {
      for (var i = 0; i < a.length; ++i)
      {
        if (currentElm.id != a[i].id)
          a[i].style.backgroundColor = colorIfNotMatch;
      }
      currentElm.style.backgroundColor = colorIfMatch;
    }
  }
}

Otestad kod. :)

Det här är ju helt fantastiskt! :bire ...nästan Använder funktionen som använder sig av id. Du gissade rätt!

Hovereffekten på länkarna försvinner, går det att lösa eller får jag leva utan?

Tusen tack!

Hm, vad triggar hovereffekten? Är det någon CSS-kod eller kanske JS-kod som körs onload?

Det är CSS-kod, enkel vanlig a: hover.

Lurigt :) Jag vet faktiskt inte, men jag lyckas återskapa problemet. Får se om någon har en bra förklaring.

Okej, jag accepterar ditt svar som slutgiltigt, det är inte världens mest nödvändiga utseendefix på den här hemsidan, så det får gå. Tack för hjälpen! :bire

Efter lite testning fungerar det om man manipulerar class-attributet istället för de individuella style-egenskaperna. Exempel:

function changeColor(currentElm, classNameIfMatch, classNameIfNotMatch)
{
  var ids = ["a1", "a2", "a3", "a4", "a5"];
  for (var i = 0; i < ids.length; ++i)
  {
    if (currentElm.id != ids[i]){
      document.getElementById(ids[i]).className = classNameIfNotMatch;
    }
  }
  currentElm.className = classNameIfMatch;
}

<style>
ul li a.default:hover{
 background-color:green;
}

ul li a.active{
 background-color:black;
}
</style>

<ul>
<li><a id="a1" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild1_small.jpg" /></a></li>
<li><a id="a2" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild2_small.jpg" /></a></li>
<li><a id="a3" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild3_small.jpg" /></a></li>
<li><a id="a4" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild4_small.jpg" /></a></li>
<li><a id="a5" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild5_small.jpg" /></a></li>
</ul>

Fast då funkar hover endast på det objektet som är markerat, inte på de övriga?

För mig fungerar hover på alla utom det som är markerat.

Jo, jag hade fått i mig lite öl igår och var stressad, nu funkar det fint här med. Tusen tack! :)