Question

我想设计一个包含多个菜单标签的视频库。共有24个视频和6个标签（每个标签下4个）。我是JavaScript / jQuery的新手，我不知道从哪里开始。我是否必须在onClick上创建一个函数？

我看到它的方式是这样的：有一个主显示div，从菜单中选择的视频将出现。默认情况下，当页面加载时，将显示第一个视频，然后将替换为从菜单中单击的链接中选择的任何视频。在这个例子中，我希望从菜单中选择的div将div“active-demo”替换为“inactive”

我想知道如何在选择一个视频时隐藏其他23个视频。

我应该使用display：block / none还是visibility：hidden / invisible还是其他我可以使用的东西（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

我首先要添加一个名为＆＃34; tab-link＆＃34;的类。到每个选项卡选择器链接，以便使用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');
     });
});

修改

我后来意识到，你的第一个演示周围有一个额外的div，可以保持第一个演示的链接不起作用。删除该div并将active-div类添加到它所包含的类应该允许它工作。

我将工作代码放在JSFiddle上：https://jsfiddle.net/9h6a4ckp/

Answer 2

这有效

<强> HTML

＆＃13;

$(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');
    }
   })
  })
})

＆＃13;

.active-demo {
 display:block;
}

.inactive {
  display:none;
}

＆＃13;

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

＆＃13;

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>

样本：

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/

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

3 个答案: