使用按鈕更改視頻

嗨我的頁面中有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>

來源

2015-11-09 dummy

你可以用java腳本的幫助下做到這一點。 – RajSharma

一般情況下，你要使用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>

來源

2015-11-09 07:03:08 Itay

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

來源

2015-11-09 07:11:03 vanio178

你可以做這樣的事情....

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

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

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

jsfiddle---

來源

2015-11-09 07:15:41 RajSharma

使用按鈕更改視頻

回答

相關問題