单击菜单，将div内容替换为隐藏div

Question

I'm would like to design a video gallery with multiple menu tabs. There are 24 videos and 6 tabs(4 under each). I am new to JavaScript/jQuery and I'm not sure where to start. Do I have to create a function onClick?

The way I see it is this: There is a main display div where the video selected from the menu will appear. By default, when the page loads, the first video appears and then will be replaced by whatever video is chosen from the link that is clicked from the menu. In this example, I want the div that is selected from the menu to replace the div "active-demo" from "inactive"

I want to know how I can hide the other 23 videos while one is selected.

Should I use display: block/none or visibility: hidden/invisible or is there something else I can use(JS or jQuery).

Here is the code I have so far:

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

I would first add a class called "tab-link" to each of the tab selector links to make them easy to select with the jQuery. Then, your jQuery would look something like this:

$(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:

I realized later than your first demo has an extra div around it that keeps the link for the first one from working. Removing that div and adding the active-div class to the one it enclosed should allow it to work.

I put the working code on a JSFiddle: https://jsfiddle.net/9h6a4ckp/

Answer 2

This works

HTML

 $(function() { $('a').on('click', function() { var val = $(this).attr('href'); $('.video').find('div').each(function() { if(!($(this).hasClass('inactive'))) { $(this).addClass('inactive'); } }) $('.video').find('div').each(function() { if(('#' + $(this).attr('id')) === val) { alert($(this).attr('id')) $(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

What I am doing is finding which link is clicked and then removing class inactive from the corresponding div and before that adding class inactive to the div which did not have it.

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>

This should work: Don't forget to add jquery.js. You will need to for jquery to work

<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:

https://jsfiddle.net/b3ks0ybr/

Instead of hide and unhide:

THIS IS WHAT YOU CAN DO:

<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>

HERE IS THE EXAMPLE:

https://jsfiddle.net/ef8xrtkg/