更新:我根据添加到问题中的新信息完全改变了答案。
听起来<a>
元素应该像“下一步”按钮一样。
我将 HTML 更改为具有第三个元素:
<!-- thumbs -->
<div class="media-thumb ">
<img src="thumb.jpg" />
<p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
<img src="thumb.jpg" />
<p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
<img src="thumb.jpg" />
<p><a href="#">Link 3</a></p>
</div>
<!-- images -->
<div class="media pull-left">
<img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
<img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
<img src="img.jpg" />
</div>
<!-- text -->
<div class="media-aside">
<h4>heading 4</h4>
<p>Text...</p>
<p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
<h4>heading 5</h4>
<p>Paragraph...</p>
<p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
<h4>heading 6</h4>
<p>Paragraph...</p>
<p class="call-to-action"><a href="someurl">url</a></p>
</div>
此 JavaScript 将循环遍历元素。如果单击“链接 1”,则“链接 2”、第二个img.media.pull-left
图像和第二个div.media-aside
将显示。如果单击“链接 2”,将显示拇指、图像和文本部分的第三个元素等。
var $divs = $('.media-thumb'),
$imgs = $('.media'),
$txts = $('.media-aside'),
sets = [],
max = $divs.length,
cur = 0,
i = 0,
$temp;
// create jQuery objects that contains the .media-thumb, .media,
// and .media-aside HTML elements that should be showing at the
// same time. IE, a jQuery object with the 1st .media-thumb, the 1st
// .media, etc.
for (; i < max; i++) {
sets[i] = $divs.eq(i)
.add($imgs.eq(i))
.add($txts.eq(i));
}
// when the <a> is clicked, turn off the current set
// and turn on the next set
$divs.on('click', 'a', function() {
sets[cur].addClass('is-hidden');
cur = ++cur % max;
sets[cur].removeClass('is-hidden');
});
一个 jsFiddle 演示:http: //jsfiddle.net/TvK53/