Question

我想创建一个导航链接，点击该链接后，会过滤使用数据过滤器标记的页面上的视频。可以用HTML完成吗？我需要jQuery吗？

<ul class="nav navbar-nav navbar-left">
  <li><a href="#" data-filter="video1" tabindex="-1">Video 2</a></li>
  <li><a href="#" data-filter="video2" tabindex="-1">Video 1</a></li>
</ul>

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <h4>Video 2 title</h4>
            <div class="embed-responsive embed-responsive-16by9" data-filter="video2">
            <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <h4>Video 1 title</h4>
            <div class="embed-responsive embed-responsive-16by9" data-filter="video1">
            <iframe class="embed-responsive-item" src="video1" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>

Answer 1

如果您想操纵用户可见的内容，则需要某种javascript。

它可能很容易使用id和类值来简化事情。

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 video video2">
        <h4>Video 2 title</h4>
            <div class="embed-responsive embed-responsive-16by9" >
            <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>

然后你可以使用

<ul class="nav navbar-nav navbar-left">
  <li><a href="#" id="video1" class="videoFilterBtn" tabindex="-1">Video 2</a></li>
  <li><a href="#" id="video2" class="videoFilterBtn" tabindex="-1">Video 1</a></li>
</ul>

，您的脚本将是

$( document ).ready(function() {
    $(".videoFilterBtn").on("click", function(e){
        e.preventDefault() // stop default click events like navigation
        $(".video").hide() // hide all videos
        $("#" + $(this).prop("id")).show() // show the one with class matching this element id
    }
});

我所做的是将2个类添加到包含视频iframe的顶级div中。一个是通用视频＆＃39;用于快速隐藏所有视频的类，另一个用于匹配数据过滤器中的视频编号，例如＆＃39; video2＆＃39;。

然后我为每个元素添加了一个id属性，还有一个类将它们挂钩到click事件中。

剧本说：

找到class = videoFilterBtn
将
停止默认的浏览器点击行为;
使用＆＃39;视频＆＃39;隐藏所有元素班级（和他们的孩子）
显示具有与所点击的元素id值匹配的类的任何元素。

如果你想要更性感的效果，改变.fadeOut（）的.hide（）和.fadeIn（）的.show（）。

您还需要链接到jquery。

PS。您可能需要考虑使用对象而不是iframe来托管您的视频。

如何为嵌入视频创建过滤器？

1 个答案: