我有分裂显示和隐藏。现在我想要的是点击“显示”下面的一个分区显示详细信息和“显示”分区的文本更改为“隐藏”和点击“隐藏”细节隐藏,文字更改为“显示”。如何做到这一点。请帮助
这是我的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>
我的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>
它不显示详细信息。请帮助
答案 0 :(得分:1)
您无需跨越切换内容。使用两个跨度来实现这将使代码更复杂。试试这个:
<强> HTML 强>
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
<强> JS:强>
$('#show').click(function() {
$('#info').toggle();
var visible = $('#info').is(":visible");
if(visible)
$('a',this).html('Hide details');
else
$('a',this).html('Show details');
});
<强> Working Demo 强>
<强>更新强>
<强> Demo for multiple 强>
答案 1 :(得分:0)
答案 2 :(得分:0)
使用jQuery轻而易举。试试jsfiddle上的例子。
// Gets executed when document and markup is fully loaded
$(document).ready(function() {
// Bind a click event on the element with id 'toggle'
$('#toggle').click(function() {
// Change text accordingly
if ($('#text').html() == 'Show details') {
$('#text').html('Hide details');
} else {
$('#text').html('Show details');
}
// Show / Hide info bar
$('#info').toggle();
});
});
答案 3 :(得分:0)
$("#show a").click(function(e) {
e.preventDefault();
$("#info, #hide").show();
$("#show").hide();
});
$("#hide a").click(function(e) {
e.preventDefault();
$("#info, #hide").hide();
$("#show").show();
});
答案 4 :(得分:0)
您可以这样做:
您几乎不需要HTML:
<span class="toggle">Show Details</span>
<div id="info">
Details shown here
</div>
以及css中的display:none
和以下jQuery:
$(".toggle").click(function() {
$('#info').slideToggle();
if($(this).html() == "Show Details") {
$(this).empty().text("Hide Details");
}
else {
$(this).html("Show Details");
}
});