显示和隐藏细节,点击一个部门
Show and hide details on click of a divison
我有分区显示和隐藏。现在我想要的是,在点击"显示"它下面的一个分区显示细节和"显示"分区的文本更改为"隐藏"和点击"隐藏"的细节得到隐藏和文本更改为"显示"。如何做到这一点,请帮助
这是我的html:
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<span id="hide" class="" style="display:none">
<a href="#" class="fill-div" style="width: 100px;">
Hide details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
编辑:
<tr class="">
<td width="40%" valign="top">
(<%=browser%>)
<span class="show" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px; margin-left: 141px; margin-top: -20px;">Show details</a>
</span>
<div class="info" style="display:none; margin-left:2em">
<i>
"<%=useragent%>"
</i>
</div>
</td>
<td valign="top">
India(<%=rs.getString("IP_ADD")%>)
</td>
<td valign="top">
3:16 pm (0 minutes ago)
</td>
</tr>
My JAVASCRIPT:
<script>
$(document).ready(function() {
$(document).ready(function() {
$('.show').click(function() {
$(this).next().toggle();
var visible = $(this).next().is(":visible");
if(visible){
$('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}
});
});
</script>
不显示详细信息。请帮助
切换内容不需要span。使用两个span来实现这一点将使代码更加复杂。试试这个: