嗨我使用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="#">< previous</a></div>
<div class="carousel-next"><a href="#">> 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="#">< previous</a></div>
<div class="carousel-next"><a href="#">> 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="#">< previous</a></div>
<div class="carousel-next"><a href="#">> 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="#">< previous</a></div>
<div class="carousel-next"><a href="#">> 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>
什麼不行?該標籤或滑動圖像插件?你可以請你發佈你寫的jQuery。此外,你應該真正包裝你的屬性值引號,例如。 ''href =「<?php echo $ productLink?>」' –
yor代碼中似乎還有一個流氓'',儘管我不認爲這是造成問題的原因。 –
當我點擊選項卡時,我希望帶有圖像的圖像滑動腳本和Css,因爲我正在接觸第一個選項卡。但是我無法在第二個標籤上看到效果 – ScoRpion