这是我的css和Jquery我创建了这两个函数,用于在单击表格中的图像时显示文本,然后如果单击文本则再次显示图像。
<style>
.espanto {
margin:0px 25px 0px 25px;
display:none;
}
</style>
<script>
function showImage(){
$('.espanto').show();
$('.hide').hide();
}
function hidonio(){
$('.espanto').hide();
$('.hide').show();
}
</script>
然后我有这个结构。这里是我编写表格并使用类来实现它的地方
<div id="content">
<p align="center"><span class="titles" style="color:#1A4487; line-height:10px;">Productos Artesanales Gourmet</span></p>
<div class="bar"></div>
<p class="parag" style=" ">Kanaan le ofrece una extensa seleccion de conservas, chutneys, aceites y salsas, que le brindaran ese sabor que usted estaba buscando, por favor no dude en contactarnos si desea una cotizacion o muestras gratis, de clic en alguna imagen para ver su descripcion.</p>
<p align="center"><span class="titles espanto" style="color:#1A4487; line-height:10px;"><br />
Descripciones.</span></p>
<table align="center" style="color:#1A4487;" width="650" border="0">
<tr>
<td width="250px"><p class="titles" align="center" > <span class="parag espanto"><br />
<a href="#" onclick="hidonio()" >Producto de origen Hindú que sirve para acompañar y hornear carnes como pescado, pollo, cerdo, etc. Dándole un exquisito sabor a sus platillos, sabores: ciruela, tamarindo, carambolo, calabaza, durazno y piña</a></span><a href="#" onclick="showImage()" ><img src="pr/Chutneys 2.jpg" height="200" class="hide" /></a><br />
Chutneys</p></td>
<td width="250px"><p class="titles" align="center"><span class="parag espanto"><br />
<a href="#" onclick="hidonio()" > Aceites aderezados para saborizar carne y ensaladas de sabor canela, romero, laurel, thai, (rojo y picante), y hiervas finas</a></span><a href="#" onclick="showImage()" ><img src="pr/Aceites 2 a.jpg" height="200" class="hide"/></a><br />
Aceites </p></td>
<td width="250px"><p class="titles" align="center"> <span class="parag espanto"><br />
<a href="#" onclick="hidonio()" >Conservas dulces (frutas en almíbar)<br />
De todo tipo de frutas (guayaba, mango, durazno, piña, camote, calabaza, etc.)<br />
<br />
Conservas saladas (encurtidos)
En salmuera o en vinagre (col morada, calabacita, espárragos, chichar
答案 0 :(得分:0)
你应该遵循不引人注目的JavaScript的jQuery方法,避免使用内联函数和onclick处理程序。
而是使用选择器在元素上定义click事件,如下所示:
$('.titles a:first').on('click', function(){
$(this).closest('p').find('.espanto').hide();
$(this).closest('p').find('.hide').show();
});
这基本上是你的第一个场景。第二个将与$('.titles a:last')...
类似。
<强>更新强>
这是一个可以做你想要的工作jsFiddle。上面的代码并不完全正常,特别是选择器为false以获取链接。以下是小提琴的更新:
$('table td').find('a:first').on('click', function(){
$(this)
.parent()
.hide()
.parent().find('img').show();
}).end()
.find('a:last').on('click', function(){
$(this).hide()
.closest('td').find('span:first').show();
});