Question

您好我正在使用2个jQuery插件，一个用于标签，另一个用于在我的标签中滑动图像。目前我有2个标签。第一个选项卡的jQuery工作正常但是当我点击下一个选项卡时，它可以工作。元素也出现在第二个选项卡中，但类不会从隐藏切换到可见。

我正在使用这两个插件
For My tabs
For Sliding images inside each Tab

这是我的代码： -

<div class="demo" style="display: inline-block;">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" > <?php echo $categoryName ?> </a></li>
            <li><a href="#tabs-2" > <?php echo $categoryName ?> </a></li>
        </ul>
        <div id="tabs-1">
            <div id="waterwheel-carousel-flat1">
                <div class="carousel-controls">
                    <div class="carousel-prev"><a href="#">&lt; previous</a></div>
                    <div class="carousel-next"><a href="#">&gt; next</a></div>
                </div>
                <div class="carousel-images">
                    <a href=<?php echo $productLink ?> ><img src= <?php echo $imageLink ?> alt= <?php echo $productName ?>/> </a> 
                </div>
            </div>
        </div>

        <div id="tabs-2">
            <div id="waterwheel-carousel-flat">
                <div class="carousel-controls">
                    <div class="carousel-prev"><a href="#">&lt; previous</a></div>
                    <div class="carousel-next"><a href="#">&gt; next</a></div>
                </div>
                <div class="carousel-images">
                    <a href=<?php echo $productLink ?> ><img src= <?php echo $imageLink ?> alt= <?php echo $productName ?>/> </a> 
                    <?php }  ?>
                </div>
            </div>
        </div>
    </div>
</div>

我在标签内滑动图像的脚本在这里： -

<script type="text/javascript">

var jq = $.noConflict();
jq(document).ready(function () {
    jq("#waterwheel-carousel-default").waterwheelCarousel();

    jq("#waterwheel-carousel-higharch").waterwheelCarousel({
        startingWaveSeparation: -90,
        waveSeparationFactor: .7,
        centerOffset: 10,
        startingItemSeparation: 120,
        itemSeparationFactor: .9,
        itemDecreaseFactor: .75
    });

    jq("#waterwheel-carousel-horizon").waterwheelCarousel({
        startingWaveSeparation: 0,
        centerOffset: 30,
        startingItemSeparation: 150,
        itemSeparationFactor: .7,
        itemDecreaseFactor: .75,
        opacityDecreaseFactor: 1,
        autoPlay: 1500
    });

    jq("#waterwheel-carousel-flat").waterwheelCarousel({
        itemSeparationFactor: 1,
        itemDecreaseFactor: 1,
        waveSeparationFactor: 1,
        startingWaveSeparation: 0,
        startingItemSeparation: 280,
        centerOffset: 10,
        opacityDecreaseFactor: .3,
        autoPlay: 3000,
        edgeReaction: 'reverse'
    });

    jq("#waterwheel-carousel-vertical").waterwheelCarousel({
        orientation: 'vertical',
        startingItemSeparation: 100,
        startingWaveSeparation: 40,
        autoPlay: 2000
    });


  });
</script>

这是我生成的Html代码

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">



    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"> Lovely new arrivals </a></li>


    <li class="ui-state-default ui-corner-top"><a href="#tabs-2"> Designer Collection </a></li>



</ul>

<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <div id="waterwheel-carousel-flat">
      <div class="carousel-controls">
        <div class="carousel-prev"><a href="#">&lt; previous</a></div>
        <div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images" style="position: relative;">



          <a href="http://127.0.0.1/sweetpea/index.php/gold-gilt-button-bed.html"><img bed="" button="" gilt="" alt="Gold" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_2.jpg" style="display: inline; left: 119.5px; top: 10px; visibility: visible; position: absolute; z-index: 5; opacity: 0.3; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/willows-shell-carved-bed-silver-1.html"><img silver1="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_3.jpg" style="display: inline; left: 399.5px; top: 10px; visibility: visible; position: absolute; z-index: 6; opacity: 1; width: 161px; height: 161px;" class="active"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/classical-white-5ft-rococo-bed-1.html"><img bed="" rococo="" 5ft="" white="" alt="Classical" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_4.jpg" style="display: inline; left: 679.5px; top: 10px; visibility: visible; position: absolute; z-index: 5; opacity: 0.3; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/bed.html"><img alt="Bed/" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/thumbnail.jpg" style="display: inline; left: 959.5px; top: 10px; visibility: visible; position: absolute; z-index: 4; opacity: 0.09; width: 161px; height: 161px;" class=""> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/green-bed.html"><img bed="" alt="Green" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/c/o/cooper_black_bed.jpg" style="display: inline; left: 1239.5px; top: 10px; visibility: visible; position: absolute; z-index: 3; opacity: 0.027; width: 161px; height: 161px;" class=""> </a> 
                                </div>
        </div>
    </div>

    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <div id="waterwheel-carousel-flat1">
      <div class="carousel-controls">
        <div class="carousel-prev"><a href="#">&lt; previous</a></div>
        <div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">



          <a href="http://127.0.0.1/sweetpea/index.php/product-4.html"><img silver="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/k/i/kingsley-bate-rectangular-dining-set-furniture.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/gold-gilt-button-bed.html"><img bed="" button="" gilt="" alt="Gold" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_2.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/willows-shell-carved-bed-silver-1.html"><img silver1="" -="" bed="" carved="" shell="" alt="Willows" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_3.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/classical-white-5ft-rococo-bed-1.html"><img bed="" rococo="" 5ft="" white="" alt="Classical" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/s/u/sub-cat-pro-01_03_4.jpg"> </a> 

          <a href="http://127.0.0.1/sweetpea/index.php/green-bed.html"><img bed="" alt="Green" src="http://127.0.0.1/sweetpea/media/catalog/product/cache/1/thumbnail/161x161/9df78eab33525d08d6e5fb8d27136e95/c/o/cooper_black_bed.jpg"> </a> 
                                </div>
        </div>
    </div>


    </div>

Answer 1

由于这个原因无效：

<div id="waterwheel-carousel-flat">
....
<div id="waterwheel-carousel-flat">

id必须在文档中是唯一的

<小时/> 我希望你现在可以看到为什么“”（引号） - 通过指定html属性很重要（查看你的图片）

问题是 - 你已经重命名你的div，但没有初始化它，为＃waterwheel-carousel-flat1添加初始化

jq("#waterwheel-carousel-flat,#waterwheel-carousel-flat1").waterwheelCarousel({
  ... 
});

<小时/> 或使用class属性而不是id：

js init ：

jq(".waterwheel-carousel-flat").waterwheelCarousel({
  ... 
});

<强> HTML ：

<div class="waterwheel-carousel-flat">
...
<div class="waterwheel-carousel-flat">

为什么Jquery插件不适用于内部选项卡？

1 个答案: