Avatar billede stenger Nybegynder
05. juli 2007 - 11:39 Der er 15 kommentarer og
1 løsning

Skifte farve på class, baseret på en anden class

Hej Eksperter!

Håber nogen kan hjælpe!

Jeg har en menu, baseret på <li>. Når et element er aktiv får den en class, eksempelvis selected_li1 til og med selected_li5 (har 5 menu_punkter).

Hver af disse undersider er ens bygget op og den eneste forskel er egentligt at en headline (h2, .h2 (gav den også en class)) skal skifte farve og matche menuens baggrundsfarve.

Kan jeg på en eller anden måde få JavaScript til at checke om selected_li4 er tilstede, og hvis ja, så skal min headline have en specfik baggrundsfarve... og en anden, hvis selected_li2 er tilstede?

Disse classes (selected_li1 til 5) er kun i mit dokument, såfremt man har klikket på et af underpunkterne og forsvinder igen, så snart man klikker væk.

Tak for hjælpen (forhåbentligt)... :)
Avatar billede olebole Juniormester
05. juli 2007 - 12:24 #1
<ole>

Skift af CSS-klasse skal du, så vidt det overhovedet er muligt, undgå. Det performer rent elendigt.
Hvad du skal gøre i stedet, kan jeg ikke umiddelbart gætte mig frem til uden at kende koden  =)

/mvh
</bole>
Avatar billede stenger Nybegynder
05. juli 2007 - 12:31 #2
Nu kan det godt være vi snakker forbi hinanden, men jeg prøver alligevel... :)

Den skal som sådan ikke skifte class. Class skal stadig hedde det samme, det eneste er at der skal forskellig color på, afhængig af om selected_li* er tilstede eller ej.

De fem forskellige <li>´s skal altså have forskellig color på en .h2-class. Der vil dog aldrig være mere end én forekomst af selected_li*... du kan altså ikke have både selected_li2 og selected_li3 på én og samme side.

Men altså... er selected_li2 tilstede, så giv .h2 denne farve. Er selected_li3 tilstede, så giv den denne her farve... og så videre. Det er tanken bag :)
Avatar billede olebole Juniormester
05. juli 2007 - 12:36 #3
Prøv at lægge et link  =)
Avatar billede stenger Nybegynder
05. juli 2007 - 12:52 #4
Kan jeg desværre ikke, da der er tale om et kommercielt kunde-site :)


Men lidt kode kan måske hjælpe?

<div id="subpages_con">
      <div id="submenu_con">
            <ul id="nav_sub">
  <li class="selected_li1">
    <a href="Default.aspx?ID=411">Menu 1</a>
  </li>
  <li class="colored_li2">
    <a href="Default.aspx?ID=412">Menu 2</a>
  </li>
  <li class="colored_li3">
    <a href="Default.aspx?ID=413">Menu 3</a>
  </li>
  <li class="colored_li4">
    <a href="Default.aspx?ID=414">Menu 4</a>
  </li>
  <li class="colored_li5">
    <a href="Default.aspx?ID=415">Menu 5</a>
  </li>
</ul>
      </div>

      <div id="subpages_content">
<h2 class="h3">Displays</h3>
<span class="subpages_content_text"><a name="854" class="pidlink"></a><p>Explicable monto del astra in figura, nomine et funta villa brachi. Sed esset verba, con linguli dustra bulgar untera. Orcit onestra somnis, vici func nerie fino et valle nostrum, garado bellis muntro. Optera legunta fructi spenissam, nunc est gracer negro labri, octe spinoli vunta apsis.</p>
<p>&nbsp;</p>
<p>Puncres illestri mines fidel. Actro minese pulcer donne, finese alla grave proctor, superior laxit mente. Labore grafonum id esset do refugis nur ambelle, poltra verse octe binale, cactre prolonge entre pioline.</p></span>
<!--@TemplateParagraphColumn2-->
      </div>

      <div id="info_con">
            <div id="info_box">
<div style="float: left;" class="info_box_text">
    <h2 class="h2">Mere information</h2>
    <a name="856" class="pidlink"></a><p>Fyldtext
</div>
<div class="info_box_image">
    </div>
</div>

***

Igen, hvis (som her) classes .selected_li1 er tilstede, så skal .h2 have en anden color. Hvis man vælger næste menupunkt, som så vil få class .selected_li2, så skal .h2 have en anden farve igen.

If that makes any sense... :)
Avatar billede roenving Novice
05. juli 2007 - 17:36 #5
Så kan det kun gøres ved at hente alle h2-tags, checke om de har den klasse, og i så tilfælde sætte baggrundsfarven direkte på tagget !-)
Avatar billede stenger Nybegynder
06. juli 2007 - 08:15 #6
Problemet er jo bare at .h2 altid helst skal hedde .h2 :) Men udseendet skal ændre sig alt efter om det er selected_li1 eller selected_li2, som er tilstede...

Ved ikke om det kan lade sig gøre, men ihvertfald tak for hjælpen. Smid et svar, hvis du vil have points.
Avatar billede roenving Novice
10. juli 2007 - 10:22 #7
Ja ?-)
Avatar billede stenger Nybegynder
10. juli 2007 - 10:36 #8
Ja, hvad? Har vi røget pot her til morgen? :)
Avatar billede roenving Novice
10. juli 2007 - 10:48 #9
-- det er jo netop det problem, jeg adresserer med 05/07-2007 17:36:45 ...
Avatar billede stenger Nybegynder
10. juli 2007 - 14:36 #10
Ok... tror bare ikke jeg fatter det.

.h2 er jo en klasse for sig, mens .selected_li1 er en helt anden. Så hvad menes der lige med at hente alle h2´er og checke om de har den klasse? De har kun én klasse :)

.selected_li klasserne ligger et helt andet sted i dokumentet.

Oh well, tror bare jeg dropper det. Det bliver et værre hyr med meget lidt resultat.

Smid et svar, hvis du vil have points.
Avatar billede roenving Novice
10. juli 2007 - 15:58 #11
F.eks.

var h2s = document.getElementsByTagName("h2");
for(i=0,im=h2s.length;im>i;i++){
  if(h2s[i].className.indexOf("selected_li")>-1){
    h2s[i].style.backgroundColor = "green";
  }
}
Avatar billede stenger Nybegynder
20. september 2007 - 11:57 #12
Roenving, vil du have point for det her spørgsmål? Så smid et svar :)

Ellers så lukker jeg den om et par dage...
Avatar billede olebole Juniormester
20. september 2007 - 13:43 #13
Hvad Søren ... Rønving tilbage på pinden?! Godt at se dig igen  ;o)
Avatar billede roenving Novice
21. september 2007 - 12:39 #14
Velbekomme '-)

-- og tja, 'tilbage på pinden' er vel en overdrivelse, når det bliver til en eller to formiddage hver uge !-)

Pt. har jeg et pædagog-job, der dræner så meget, at jeg næsten ikke orker at sidde alene, når jeg er færdig hver dag ...
Avatar billede roenving Novice
14. januar 2008 - 21:52 #15
Tak for point ;~}
Avatar billede olebole Juniormester
15. januar 2008 - 20:52 #16
Hehe ... vi er vist kommet i samme båd, roenving. Underviser på Teknisk Skole for tiden. Undervisning er sjovt og givende - men tapper svært fra aldrende herrers energidepoter!  ;D
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester