Question

和朋友一起，我们正在努力做一个＆＃34;标签＆＃34; jQuery中的系统。他做了标签系统，我不得不在jQuery中用缩略图做一个图像滑块。我找到了一个名为＆＃34; BXslider＆＃34;这满足了我的需求，但我的朋友的jQuery代码有问题。

当我将插件放在第一个标签中时插件工作但是当我将它放在第三个标签中时，缩略图就在那里，但不是大图像。

以下是我的朋友打开标签的代码。

$(function() {
        $('#onglets').css('display', 'block');
        $('#onglets').click(function(event) {
            var actuel = event.target;
            if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
                return;
            }
            $(actuel).addClass('actif').siblings().removeClass('actif');
            setDisplay();
        });
        function setDisplay() {
            var modeAffichage;
            $('#onglets li').each(function(rang) {
                modeAffichage = $(this).hasClass('actif') ? '' : 'none';
                $('.item').eq(rang).css('display', modeAffichage);
            });
        }
        setDisplay();
    });

使用以下代码时，当我在第三个选项卡上时，滑块不起作用：

    <div class="item">
    <?php include('./views/ContentAjax/description.php'); ?>
    </div>

    <div class="item">
    <?php include('./views/ContentAjax/tests.php'); ?>
    </div>

    <div class="item">

    <div id="game-content">
    <ul class="bxslider">
      <li><img  style="width : 200px;" src="./assets/img/assasins.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/gamerz.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/xbox.png" ></li>
    </ul>

    <div id="bx-pager">
      <a data-slide-index="0" href=""><img style="width : 100px;" src="./assets/img/assasins.png" /></a>
      <a data-slide-index="1" href=""><img style="width : 100px;" src="./assets/img/gamerz.png" /></a>
      <a data-slide-index="2" href=""><img style="width : 100px;" src="./assets/img/xbox.png" /></a>
    </div>

    <script>
    $('.bxslider').bxSlider({
      pagerCustom: '#bx-pager'
    })
    </script>
    </div>

    </div> <!-- Close <div class="item"> -->

使用以下代码，滑块位于第一个选项卡中，它可以正常工作。

    <div class="item">

    <div id="game-content">
    <ul class="bxslider">
      <li><img  style="width : 200px;" src="./assets/img/assasins.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/gamerz.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/xbox.png" ></li>
    </ul>

    <div id="bx-pager">
      <a data-slide-index="0" href=""><img style="width : 100px;" src="./assets/img/assasins.png" /></a>
      <a data-slide-index="1" href=""><img style="width : 100px;" src="./assets/img/gamerz.png" /></a>
      <a data-slide-index="2" href=""><img style="width : 100px;" src="./assets/img/xbox.png" /></a>
    </div>

    <script>
    $('.bxslider').bxSlider({
      pagerCustom: '#bx-pager'
    })
    </script>
    </div>

    </div> <!-- Close <div class="item"> -->

    <div class="item">
    <?php include('./views/ContentAjax/description.php'); ?>
    </div>

    <div class="item">
    <?php include('./views/ContentAjax/tests.php'); ?>
    </div>

您是否知道如何解决此问题以及如何将滑块放在另一个选项卡中而不是第一个选项卡？问题是我使用这个滑块（BXSlider）吗？

非常感谢你的帮助。

Answer 1

我发现了问题。问题是BXSlider，我不知道为什么，但是对于其他所有滑块或jQuery插件，它都有效。

jQuery选项卡系统中不显示jQuery滑块

1 个答案: