[英]How to refresh tab content on click event. Wordpress and Javascript
This is probably my second or third question regarding the Worpress theme in which I'm working on. 关于我正在研究的Worpress主题,这可能是我的第二个或第三个问题。 This is the website that I need help with post sample with +2 iframes
这是我需要帮助的网站,其中包含+2个iframe的发布示例
What I want is to stop the current video iframe from buffering when a different option is clicked (li element). 我想要的是在单击其他选项(li元素)时停止当前视频iframe的缓冲。 The current status of it, is the inverse of what I want.
它的当前状态,与我想要的相反。 All I mean is that all iframes can be reproduced in the same time, and I want to avoid that.
我的意思是,所有iframe都可以在同一时间复制,我想避免这种情况。
This is my php code: You can see that I have a li element witht the class of "nav-item" and the content to be displayed( <?php echo $iframe; ?>
) is inside the div with the class "video-grid" 这是我的PHP代码:您可以看到我有一个带“ nav-item”类的li元素,要显示的内容(
<?php echo $iframe; ?>
)位于div中,类为“ video” -grid”
<!-- Menu-tabs) -->
<?php $iframe_name = get_post_meta($post->ID, 'Vimeo URL', true); ?>
<?php if (!empty($iframe)) : ?>
<?php else : ?>
<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
<?php $links = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($links)) : ?>
<?php foreach ($links as $key=>$li) : ?>
<li class="nav-item <?php echo $key == 0 ? 'active ' : ''; ?>">
<a class="nav-link " data-toggle="tab" href="#tab<?php echo $key; ?>" role="tab" aria-controls="tab" aria-expanded="true">Option</a>
</li>
<?php endforeach ; ?>
<?php endif; ?>
</ul>
<div class="tab-content" id="myTabContent">
<!--------------------------------------------------------- Content-tabs / Iframes players --------------------------------------------------------------------------------->
<?php $player = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($player)) : ?>
<?php foreach ($player as $key=>$iframe) : ?>
<div class="tab-pane <?php echo $key == 0 ? 'active ' : ''; ?>" id="tab<?php echo $key; ?>" role="tabpanel" aria-labelledby="tab">
<br>
<div class="song">
<div class="video-grid">
<?php echo $iframe; ?>
</div>
</div>
</div>
<?php endforeach ?>
I tried doing this by using some Javascript code but its not working yet. 我尝试通过使用一些Javascript代码来执行此操作,但目前尚无法正常工作。 Here is what I have so far:
这是我到目前为止的内容:
$(document).ready(
function() {
$('.video-grid').click('.nav-item');
reload('.video-grid');
});
Can you guys help me with this? 你们能帮我吗?
You could reload the src
of the iframe
elements to stop them... 您可以重新加载
iframe
元素的src
来停止它们...
$(document).ready(function() {
$('a.nav-link').click(function() {
$('div#myTabContent iframe').each(function() {
$(this).attr('src',$(this).attr('src'));
});
});
});
EDITED : 编辑 :
Checking your code deeper with inspector, another solution (faster, cleaner and probably better) would be to search for the previous active panel and just stop the iframe of that panel (doesn't really make sense to reload the rest because they are not running)... 使用检查器更深入地检查代码,另一种解决方案(更快,更干净,可能更好)是搜索先前的活动面板,然后停止该面板的iframe(重新加载其余部分并没有真正意义,因为它们没有在运行) )...
$(document).ready(function() {
$('a.nav-link').click(function() {
$('div#myTabContent div.tab-pane.active iframe').attr('src',function() { return $(this).attr('src'); });
});
});
Here you have a fiddle example of your case... https://fiddle.jshell.net/rigobauer/em5vw5e7/ 在这里,您有一个案例的小提琴示例... https://fiddle.jshell.net/rigobauer/em5vw5e7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.