Søg
Avatar billede Hans1 Praktikant
12. september 2011 - 20:05 Der er 20 kommentarer og
1 løsning

Show/Hide

Hej

Prøver at lave en show/Hide funktion hvor alt bliver indlæst når siden hentes men ikke alt vises altså: display: block / display: none

Hvordan laver jeg følgende javasctript funktion:

Link1    Link2    Link3


---- Indhold ----

Her vises det forskellige indhold fra hver link.
Som standard vises indhold fra link1 - Hvis ikke andet er valgt fx når man går ind på siden.

Hvis man så vælger link2 skjules indholdet fra link1 osv

-----------------
Avatar billede pstidsen Novice
12. september 2011 - 20:13 #1
hvad med at bruge iframes? Det ville nok også være den eneste gang det er godt :) http://www.w3schools.com/tags/tag_iframe.asp
Avatar billede Hans1 Praktikant
12. september 2011 - 20:19 #2
Nu er indholdet ikke så voldsomt bare lidt tekst.
Måske ajax kunne være need mulighed.
Avatar billede keysersoze Ekspert
12. september 2011 - 20:20 #3
Der vil jeg til gengæld være uenig - javascript er umiddelbart det rigtige valg.

Tag et kig på jQuery og disse to funktioner; http://api.jquery.com/show/
http://api.jquery.com/hide/
Avatar billede pstidsen Novice
12. september 2011 - 20:20 #4
kan ikke lave det for dig i ajax (kan ikke JS), men vil godt lave det i HTML.
Avatar billede keysersoze Ekspert
12. september 2011 - 20:23 #5
AJAX vil også være en god mulighed, men det vil jeg kun mene er nødvendigt hvis vi taler større mængde indhold, der er minimal sandsynlighed for at skjult indhold skal vises eller indhold har bedst af at være helt opdateret når det skal vises.
Avatar billede majbom Novice
12. september 2011 - 20:27 #6
nej nej nej ikke frames...

<script type="text/javascript">
var visibleTab = "home";

function showTab(strTab)
{
   var arrDivs = document.getElementsByTagname("div");
   for(var i=0, var size=arrDivs.length-1; i <= size; i++)
   {
      if(arrDivs.getAttribute("ref") == "tab")
      {
         arrDivs.style.display = "none";
      }
   }
   document.getElementById(strTab).style.display = "block";
}
</script>


og så skal dine divs have et attribut der hedder "ref", med værdien "tab"

ikke testet...
Avatar billede majbom Novice
12. september 2011 - 20:28 #7
AJAX er en dårlig løsning - teksten vil ikke være tilgængelig for søgemaskinerne...
Avatar billede keysersoze Ekspert
12. september 2011 - 20:40 #8
Ikke alting skal søgeoptimeres - man skal trods alt også passe på med ikke at lægge alt for meget tekst i ikke-synlige elementer.
Avatar billede pstidsen Novice
12. september 2011 - 20:55 #9
nej det er også træls med tekst som fremgår i søgemaskiner, som ikke er på siden, fordi det er skjult...
Avatar billede Hans1 Praktikant
12. september 2011 - 21:19 #10
Okay jeg har nu lavet dette men jeg mangler funktionen som skal skjule link 2 + 3 hvis link 1 er valgt fx.



<a href="java script: toggle('link1')">Link 1</a><br/>
<a href="java script: toggle('link2')">Link 2</a><br/>
<a href="java script: toggle('link3')">Link 3</a>

<div id="link1" style="display:block">
Indhold fra link 1
</div>

<div id="link2" style="display:none">
Indhold fra link 2
</div>

<div id="link3" style="display:none">
Indhold fra link 3
</div>


<script>
function toggle(element){
    var div1 = document.getElementById(element)


if (div1.style.display == 'none') {
        div1.style.display = 'block'

    } else {
        div1.style.display = 'none'
    }
}
</script>

Avatar billede majbom Novice
12. september 2011 - 21:20 #11
se #6...
Avatar billede Hans1 Praktikant
12. september 2011 - 21:39 #12
Jo men det forstod jeg ikke lige.
Avatar billede tjens Nybegynder
12. september 2011 - 21:41 #13
Her er en demo, hvor de 3 link dog er er stylede, så de ligner faneblade: http://tjens.dk/eksperten/TextDivTabs.html
Avatar billede majbom Novice
12. september 2011 - 21:42 #14
du hente alle div-elementer (document.getElementsByTagname("div"))
og løber dem igennem - hvis de har en ref-attribut med værdien "tab" - bliver display sat til none og til sidste hente den det valgte element (document.getElementById(strTab)) og sætter display til block
Avatar billede Hans1 Praktikant
12. september 2011 - 21:49 #15
Tjens> helt sikkert noget jeg okay bruge.

Splazz> Okay kigger lige på din kode igen.
Avatar billede Hans1 Praktikant
13. september 2011 - 15:04 #16
tjens> Hvis jeg nu vil have 2 stk "text_1" ID'er.

<div id="text_1" class="tekstDiv"><p>Tekst 1</p></div>
<div id="text_1" class="tekstDiv"><p>Tekst 1</p></div>


Hvordan får jeg vist begge hvis det er den jeg har valgt.

Kan man skrive et eller andet med: && "text2_"+sId
oActive = [document.getElementById("text_"+sId), oHead ];
Avatar billede tjens Nybegynder
13. september 2011 - 15:32 #17
Så ville jeg pakke de 2 indholds-div'er ind i den nuværende:

<div id="text_1" class="tekstDiv">
  <div><p>Tekst 1.1</p></div>
  <div><p>Tekst 1.2</p></div>
</div>

Dermed skal der ikke kodes noget om i javascript
Avatar billede Hans1 Praktikant
13. september 2011 - 17:07 #18
Jo men det er bare ikke muligt.
Jeg er nød til placeres de to tekster hver for sig
Avatar billede tjens Nybegynder
13. september 2011 - 18:20 #19
OK. Så skal der bare indføres en ekstra text_n ID, som der kan laves display none/block på i javascriptet: http://tjens.dk/eksperten/TextDivTabs2.html

Nemmere at kode end forklare :-D
Avatar billede Hans1 Praktikant
13. september 2011 - 19:28 #20
Nåår det var , der skulle sætte.
Prøvede med && det virkede ikke særlig godt.

Tak for det.
Avatar billede tjens Nybegynder
13. september 2011 - 19:43 #21
Det var så lidt
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »