Question

嗨我的页面中有2个按钮和2个视频，但我想在屏幕上只有一个视频，如果我想看另一个，我只需要点击第二个按钮。我需要javascript还是有简单的方法？

<h2><u>Cats</u></h2>
<div id="random-tab-id-408" class="tabs-shortcode  tabs-shortcode-top">
<ul class="tabs-shortcode-list">
<li  ><a href="#cat2" >Cat 1</a></li>
<li  ><a href="#cat1" >Cat 2</a></li>

</ul>
<div id="cat1"  >
<div class="embed-box">
<iframe width="560" height="315" src="https://www.youtube.com/embed/tntOCGkgt98" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="cat2"  >
<div class="embed-box">
<iframe width="420" height="315" src="https://www.youtube.com/embed/yAIGLAgEa84" frameborder="0" allowfullscreen></iframe>
</div>
</div>

</div>

Answer 1

通常，您需要使用JavaScript。

这是一个使用jQuery的解决方案，它是一个JS库（它不是强制性的，但更容易使用）：

jsFiddle Demo

$("[data-cat-link]").on("click", function () {
    var catLink = $(this).data("cat-link");
    $(".cat")
        .hide()
        .filter("#cat" + catLink).show();
});

链接看起来像这样：

<a data-cat-link="1">Cat 1</a>

视频的容器如下所示：

<div id="cat1" class="cat" >
...
</div>

Answer 2

包含jQuery库，为#cat1和#cat2上课，编辑按钮的值以使其成为索引，并使用此js函数

jQuery(function(){
    jQuery('.tabs-shortcode-list li a').click(function(){
          jQuery('.video').hide();
          jQuery('#cat'+$(this).attr('href')).show();
    });
});

并将其添加到您的css：

.video{display:none;}
#cat1{display:block;}

See my FIDDLE

Answer 3

你可以这样做......

＆＃13;

$(document).ready(function(){
    $("#second").hide();
    $("#C2").click(function(){
    	$("#second").show();
        $("#first").hide();
    });
    
     $("#C1").click(function(){
    	$("#first").show();
        $("#second").hide();
    });
    
});

＆＃13;

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a:hover {
    background-color: fuchsia;
}

li {
    display: inline;
}

div {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2><u>Cats</u></h2>
<div id="random-tab-id-408" class="tabs-shortcode  tabs-shortcode-top">
<ul class="tabs-shortcode-list">
<li id="C1"><a href="#cat2" >Cat 1</a></li>
<li id="C2"><a href="#cat1" >Cat 2</a></li>

</ul>
<div id="cat1"  >
<div class="embed-box" id="first">
<iframe width="560" height="315" src="https://www.youtube.com/embed/tntOCGkgt98" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="cat2"  >
<div class="embed-box" id="second">
<iframe width="420" height="315" src="https://www.youtube.com/embed/yAIGLAgEa84" frameborder="0" allowfullscreen></iframe>
</div>
</div>

</div>

＆＃13;

jsfiddle---

使用按钮更改视频

3 个答案: