加载分区-仅选项卡OnClick
加载分区-仅选项卡OnClick
提问于 2012-10-23 23:28:37
我不知道如何在代码中添加单击操作。问题是，我必须创建一个包含600多张图片的页面，这对于页面加载来说是非常沉重的。所以我为每组图片设置了一个标签，我只想通过点击来加载它。代码中现在只有一个选项卡来显示我的问题。函数：
$(document).ready(function(){
jQuery('#mycarousel-1, #mycarousel-2, #mycarousel-3, #mycarousel-4, #mycarousel-5, #mycarousel-6, #mycarousel-7').jcarousel({
horisontal: true,
wrap:'circular',
scroll:1,
easing:'easeInOutBack',
animation:1200
});菜单：
<section id="content">
<div class="page3-row1 pad-2 tabs">
<div class="col-8">
<h2 class="h2 p2">Categorie:</h2>
<div class="demo-container clear">
<ul class="list-1 nav">
<li><a href="#tab-1-modern">Modern Design</a></li>
</ul>
</div>
</div>代码：
<div class="col-9">
<h3 class="h3-2">Design's:</h3>
<div id="tab-1-modern" class="tab-content gallery-photo">
<div class="inner">
<ul id="mycarousel-1" class="jcarousel-skin-tango">
<li><a class="plus" href="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus" href="images/modern-002-big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus" href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus" href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
<li><a class="plus" href="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus" href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus" href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus" href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
<li><a class="plus" href="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus" href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus" href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus" href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
<li><a class="plus" href="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus" href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus" href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus" href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>在上面的代码中，现在也是图片。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-10-23 23:37:52
恐怕从你到目前为止我所能做的已经是最好的了.
$('#mycarousel-1 li').click(function() {
// code here to load the images...
});编辑
<div class="col-9">
<h3 class="h3-2">Design's:</h3>
<div id="tab-1-modern" class="tab-content gallery-photo">
<div class="inner">
<ul id="mycarousel-1" class="jcarousel-skin-tango">
<li><a class="plus" thishref="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus" href="images/modern-002- big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus" href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus" href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
<li><a class="plus" thishref="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus" href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus" href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus" href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
<li><a class="plus" thishref="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus" href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus" href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus" href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
<li><a class="plus" thishref="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus" href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus" href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus" href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>并编写如下脚本：
$('#mycarousel-1 a').click(function() {
// this loads each image the same, but you can use the same technique to
// load the correct images for each image
var imgurl = $(this).attr('thishref');
$(this).find('img').each(function() {
$(this).attr('src',imgurl);
});
});/Edit
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13033988
复制相关文章
相似问题
腾讯云开发者
