Заменить div Содержимое со скрытым div на клик из меню

Question

Я хотел бы создать видеогалерею с несколькими вкладками меню. Есть 24 видео и 6 вкладок (по 4 под каждым). Я новичок в JavaScript/jQuery, и я не уверен, с чего начать. Мне нужно создать функцию onClick?

Способ, которым я вижу это: Существует главный экран дисплея, в котором отобразится видео, выбранное из меню. По умолчанию, когда страница загружается, появляется первое видео, а затем будет заменено любым видео, выбранным из ссылки, которая нажата в меню. В этом примере я хочу, чтобы div был выбран из меню, чтобы заменить div «active-demo» с «inactive»

Я хочу знать, как я могу скрыть другие 23 видео, пока один из них выбран.

Должен ли я использовать дисплей: блок/нет или видимость: скрытый/невидимый или есть что-то еще, что я могу использовать (JS или jQuery).

Вот код, который я до сих пор:

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

Демо:

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

Answer 1

Я бы первым добавить класс под названием «закладки ссылка» для каждого из звеньев селекторной вкладки, чтобы сделать их легко выбрать с помощью JQuery. Затем ваш Jquery будет выглядеть примерно так:

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

позже я понял, чем ваш первый демо имеет дополнительный DIV вокруг него, который держит ссылку на первой из работающих. Удаление этого div и добавление класса active-div к тому, которое оно вложило, должно позволить ему работать.

Я положил рабочий код на JSFiddle: https://jsfiddle.net/9h6a4ckp/

Answer 2

Это работает

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

Что я делаю, это найти, какая ссылка нажата, а затем удалить класс inactive из соответствующего div и до этого добавить класс inactive в div, у которого его не было.

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> 

Это должно работать: Не забудьте добавить jquery.js. Вам нужно для JQuery работать

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

Вместо скрытию и:

ЭТО ЧТО ВЫ МОЖЕТЕ СДЕЛАТЬ:

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

ЗДЕСЬ ПРИМЕР:

https://jsfiddle.net/ef8xrtkg/