爲什麼Jquery插件不適用於內部標籤？

嗨我使用2個jQuery插件，一個用於製表符，另一個用於在我的選項卡中滑動圖像。目前我有2個選項卡。第一個選項卡的jQuery工作正常，但是當我點擊下一個選項卡時，它開始工作。這些元素也存在於第二個選項卡中，但類不會從隱藏狀態切換到可見狀態。爲什麼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>

來源

2011-11-17 ScoRpion

什麼不行？該標籤或滑動圖像插件？你可以請你發佈你寫的jQuery。此外，你應該真正包裝你的屬性值引號，例如。 ''href =「<？php echo $ productLink？>」' –

yor代碼中似乎還有一個流氓''，儘管我不認爲這是造成問題的原因。 –

當我點擊選項卡時，我希望帶有圖像的圖像滑動腳本和Css，因爲我正在接觸第一個選項卡。但是我無法在第二個標籤上看到效果 – ScoRpion

它不因爲這項工作：

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

的ID必須在文件

我希望現在你可以看到爲什麼「」（引號內是唯一的） - 通過指定html屬性很重要（看你的圖片）

問題是 - 你已經改名你的div，但沒有初始化它，因爲＃水車旋轉木馬flat1添加初始化

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

或使用類屬性，而不是ID：

JS初始化：

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

html：

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

來源

2011-11-17 10:49:12 Irishka

不，這是錯誤的，實際上這些ID是不同的 – ScoRpion

，這裏有 _「_>和裏面的img標籤？ – Irishka

如果這將是原因然後沒有選項卡應該工作...但我的第一個標籤工作正常。問題是與第二個標籤 – ScoRpion

爲什麼Jquery插件不適用於內部標籤？

回答

相關問題