Ersetzen div Inhalt mit versteckten div beim Klicken von Menü

Question

Ich möchte eine Video-Galerie mit mehreren Menü-Registerkarten entwerfen. Es gibt 24 Videos und 6 Tabs (jeweils 4). Ich bin neu in JavaScript/jQuery und ich bin mir nicht sicher, wo ich anfangen soll. Muss ich eine Funktion onClick erstellen?

Die Art, wie ich es sehe, ist dies: Es gibt eine Hauptanzeige Div, wo das Video aus dem Menü ausgewählt wird. Wenn die Seite geladen wird, wird standardmäßig das erste Video angezeigt und dann durch das Video ersetzt, das aus dem Link ausgewählt wurde, auf den aus dem Menü geklickt wird. In diesem Beispiel möchte ich das div, das aus dem Menü ausgewählt ist, um das div "aktiv-demo" von "inaktiv" zu ersetzen.

Ich möchte wissen, wie ich die anderen 23 Videos ausblenden kann, während eines ausgewählt ist.

Soll ich display: block/none oder visibility: hidden/invisible oder gibt es noch etwas, das ich verwenden kann (JS oder jQuery). Hier

ist der Code Ich habe bisher:

HTML

<div> 
    <ul> 
    <li> 
     <a href='#demo'>Menu</a> 
     <ul> 
     <li> 
      <a href='#demo1'>Demo 1</a> 
     </li> 
     <li> 
      <a href='#demo2'>Demo 2</a> 
     </li> 
     <li> 
      <a href='#demo3'>Demo 3</a> 
     </li> 
     <li> 
      <a href='#demo4'>Demo 4</a> 
     </li> 
     </ul> 
    </li> 
</div> 

<div class="active-demo"> 
    <div id="demo1"> 
    <iframe src='https://player.vimeo.com/video/9153533' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
    </div> 
</div> 

<div id="demo2" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/2112265' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

<div id="demo3" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/2112264' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

<div id="demo4" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/9153534' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

CSS

.active-demo { 
display:block; 
} 

.inactive { 
    display:none; 
} 

Demo:

https://jsfiddle.net/ajaymz/L1xjtwvr/

Answer 1

Ich würde zunächst eine Klasse hinzufügen "Tab-link" zu jedem der Register-Auswahl Links nennt sie leicht wählen mit der jQuery zu machen. Dann Ihre jQuery würde wie folgt aussehen:

$(function() { 
    $('.tab-link').on('click', function() { 
      // Switch the class on the previously active div to make it hidden 
      $('.active-demo').removeClass('active-demo').addClass('inactive'); 
      // Switch the class on the new active div to show it 
      var selectorForActiveDemo = $(this).attr('href'); 
      $(selectorForActiveDemo).removeClass('inactive').addClass('active-demo'); 
    }); 
}); 

EDIT:

ich später erkannte, als Ihre erste Demo hat eine extra div drum herum, die von der Arbeit auf den Link für die erste hält. Entfernen Sie dieses div und fügen Sie die active-div Klasse zu dem einen es sollte es funktionieren lassen.

Ich legte den Arbeitscode auf einem JSFiddle: https://jsfiddle.net/9h6a4ckp/

Answer 2

Dies funktioniert

HTML

$(function() { 
 
\t $('a').on('click', function() { 
 
    \t var val = $(this).attr('href'); 
 
    $('.video').find('div').each(function() { 
 
    \t if(!($(this).hasClass('inactive'))) { 
 
     \t $(this).addClass('inactive'); 
 
     } 
 
    }) 
 
    $('.video').find('div').each(function() { 
 
    \t if(('#' + $(this).attr('id')) === val) { 
 
    \t alert($(this).attr('id')) 
 
    \t $(this).removeClass('inactive'); 
 
    } 
 
    }) 
 
    }) 
 
})

.active-demo { 
 
display:block; 
 
} 
 

 
.inactive { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
     <a href='#demo'>Menu</a> 
 
     <ul> 
 
     <li> 
 
      <a href='#demo1'>Demo 1</a> 
 
     </li> 
 
     <li> 
 
      <a href='#demo2'>Demo 2</a> 
 
     </li> 
 
     <li> 
 
      <a href='#demo3'>Demo 3</a> 
 
     </li> 
 
     <li> 
 
      <a href='#demo4'>Demo 4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    
 
    </div> 
 
<div class="video"> 
 
    <div class="active-demo"> 
 
     <div id="demo1"> 
 
     <iframe src='https://player.vimeo.com/video/9153533' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
 
     </div> 
 
    </div> 
 

 
    <div id="demo2" class="inactive"> 
 
     <iframe src='https://player.vimeo.com/video/2112265' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
 
    </div> 
 

 
    <div id="demo3" class="inactive"> 
 
     <iframe src='https://player.vimeo.com/video/2112264' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
 
    </div> 
 

 
    <div id="demo4" class="inactive"> 
 
     <iframe src='https://player.vimeo.com/video/9153534' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
 
    </div> 
 
</div>

DEMO JSfiddle

Was ich tue, ist zu finden, welcher Link angeklickt wird und dann Klasse inactive aus dem entsprechenden div entfernen und davor inactive zu der div hinzufügen, die es nicht hatte.

Answer 3

<div> 
    <ul> 
    <li> 
     <a href='#demo'>Menu</a> 
     <ul> 
     <li> 
      <a href='#demo1'>Demo 1</a> 
     </li> 
     <li> 
      <a href='#demo2'>Demo 2</a> 
     </li> 
     <li> 
      <a href='#demo3'>Demo 3</a> 
     </li> 
     <li> 
      <a href='#demo4'>Demo 4</a> 
     </li> 
     </ul> 
    </li> 
    </ul> <!-- add missing ul close --> 
</div> 

<div id="demo1" class="active-demo"> <!-- put id in the div --> 
    <iframe src='https://player.vimeo.com/video/9153533' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 
<div id="demo2" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/2112265' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

<div id="demo3" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/2112264' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

<div id="demo4" class="inactive"> 
    <iframe src='https://player.vimeo.com/video/9153534' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

Dies sollte funktionieren: Vergessen Sie nicht, jquery.js hinzuzufügen. Sie werden für jquery brauchen

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
// prevent executing script when #demo being clicked 
$('ul li ul li a').click(function(e){ 
// prevent default behaviour of a 
e.preventDefault(); 
// reset any .active-demo to .inactive class 
$('.active-demo').addClass('inactive').removeClass('active-demo'); 
// get the value of the href attribute that clicked 
var str = $(this).attr('href'); 
// remove the hash from that value 
var target = str.substring(1, str.length); 
// change the target id's class from .inactive to .active-demo 
$('#'+target).addClass('active-demo').removeClass('inactive'); 
}); 
</script> 

DEMO zu arbeiten:

https://jsfiddle.net/b3ks0ybr/

statt verstecken und sichtbar machen:

DIES IST WAS KÖNNEN SIE TUN:

<div> 
    <ul> 
    <li> 
     <a href='#demo'>Menu</a> 
     <ul> 
     <li> 
      <a href='https://player.vimeo.com/video/9153533'>Demo 1</a> 
     </li> 
     <li> 
      <a href='https://player.vimeo.com/video/2112265'>Demo 2</a> 
     </li> 
     <li> 
      <a href='https://player.vimeo.com/video/2112264'>Demo 3</a> 
     </li> 
     <li> 
      <a href='https://player.vimeo.com/video/9153534'>Demo 4</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

<div id="active-demo"><iframe src="https://player.vimeo.com/video/9153533" width="500" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
// prevent executing script when clicking #demo 
$('ul li ul li a').click(function(e){ 
    // prevent default behaviour of click a tag 
    e.preventDefault(); 
    // get the link from href that clicked 
    var src = $(this).attr('href'); 
    // write the iframe code together with the link inside div id active-demo 
    $('#active-demo').html('<iframe src="' + src + '" width="500" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'); 
}); 
</script> 

Hier ist das Beispiel:

https://jsfiddle.net/ef8xrtkg/