这是我的 html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
<a rel="img1">Link1</a>
</td>
<td>
<a rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="cant-believe-it-icon.png" id="img1"/>
<img src="too-much-icon.png" id="img2"/>
</div>
<span>Text with fist image</span>
<span>Text with second image</span>
还有我的 jQuery:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
单击第一个 td 时,第一个图像可见。当点击第二个 td 时,第一个图像隐藏,第二个图像可见。我如何将其应用于跨度?
更新:我为所有图像设置并跨越一个类=“组”。然后我使用 id="group1"、"group2"等将第一张图像与第一个跨度等配对。然后我将 td 的 rel 设置为“group1”、“group2”等。javascript 现在显示为:
$( window ).load(function() {
$(".groups").hide()
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$(".groups").hide()
$('#'+rel).fadeIn('slow');
});
打开时一切都隐藏起来,但是当点击 td 时没有任何反应?
最佳答案
Solution
HTML
<div id="box">
<img src="http://placehold.it/350x250/&text=img1" class="img1"/>
<img src="http://placehold.it/350x250/&text=img2" class="img2"/>
</div>
<span class="img1">Text with fist image</span>
<span class="img2">Text with second image</span>
CSS
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
$('.'+rel).fadeIn('slow');
});
关于javascript - 创建在单击另一个对象时隐藏的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23183256/