Question

我正在使用EasyTabs（http://os.alfajango.com/easytabs）来构建我的网站。我想添加一个滑块脚本，以便在其中一个最初未显示的选项卡中运行。选择选项卡后，滑块脚本将不会激活。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/jquery.ba-hashchange.js" type="text/javascript"></script>
  <script src="js/jquery.easytabs.js" type="text/javascript"></script> 
  <script src="js/jquery.slides.min.js"></script>

这将启动EasyTabs脚本：

<script type="text/javascript">
$(document).ready( function() {
  $('#tab-container').easytabs();
});
</script>

这将启动Slider脚本：

<script>
$(function() {
  $('#slides').slidesjs({
    width: 1000,
    height: 444,
    navigation: false,
    play: {
        interval: 2000,
        auto: true
    }
  });
});
</script>

所有这些都在标题中。

</head>

如何在单击包含它的EasyTabs选项卡时初始化Slider脚本？谢谢！

Answer 1

在jQuery tabs not working中建议放置jQuery.noConflict（）;就在文件就绪功能之前。

Answer 2

我遇到了Bootstrap框架和我的图像滑块的相同问题，滑块在选项卡之前加载其脚本并且其内容处于活动状态，从而导致滑块不能正常工作。是否有一个事件处理程序加载脚本就像Tab打开一样？

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" defer></script>

<script type="text/javascript" defer>
    $(document).ready(function () {
        $('.slider').bxSlider({
            slideWidth: 214,
            minSlides: 1,
            maxSlides: 3,
            moveSlides: 1,
            slideMargin: 20
        });
    });
</script>

Picture of how it looks after load

Picture of how it looks when I open the Console, forcing the script to reload

在所有html内容

之后，所有脚本都位于正文的末尾

EasyTabs + Slider脚本 - Slider不会初始化

2 个答案: