jquery切换标签

如何获得标签切换显示/隐藏？下面是我的代码，目前它也显示节目。我希望它从显示切换到隐藏并从隐藏切换到显示。当显示节目的股利将被隐藏，但点击显示标签时会切换到隐藏和股利将会显示出来，当隐藏在单击标签将回到显示和股利会被隐藏jquery切换标签

<html> 
<head> 
<title>jQuery test page</title> 
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
$("#clickMe").click(function() { 
$("#textBox").toggle(); 
}); 
}); 
</script> 
</head> 
<body> 
<label id="clickMe">Show</label> 
<br /> 
<div id="textBox" style="display: none">This text will be toggled</div> 
</body> 
</html>

来源

2011-11-30 Juan Almonte

如果我看了你的问题的权利，那么，我觉得有以下将工作：

$('#clickMe').toggle(
      function(){ 
       $('#textBox').show(); 
       $('#clickMe').text('hide'); 
      }, 
      function(){ 
       $('#textBox').hide(); 
       $('#clickMe').text('show'); 
      });

JS Fiddle demo。

如果您使用属性for，来定义该label“连接”，并且还采用了类名，然后这可以更通用的和有益的元素：

$('.clickMe').toggle(
      function(){ 
       $('#' + $(this).attr('for')).show(); 
       $(this).text('hide'); 
      }, 
      function(){ 
       $('#' + $(this).attr('for')).hide(); 
       $(this).text('show'); 
      });

JS Fiddle demo。

但请记住，label元素用于将信息与特定的input元素相关联，而不是任意元素的通用标识符。理想情况下，您应该使用span或div元素，而不是label用于此目的。

如果切换到使用非label元素，则for属性也不应使用，在它的地方，我建议（假设之间有什么目前label和div相同的连接）使用自定义data-*属性（如data-for）来标识关系。

另请注意，在上面的例子-final-，使用class代替id选择器，由于id必须是文档中是唯一的。

来源

2011-11-30 01:49:31

使用具有回拨功能的Toogle：http://api.jquery.com/toggle-event/

然后您可以在每个回调中设置标签的文本。

answer这里讲的是不同的切换API调用。

来源

2011-11-30 01:46:20

在切换之前或之后添加下面的代码。

http://jsfiddle.net/UuADb/

label = $(this); 
if(label.html()=="Show"){ 
    label.html('Hide'); 
}else{ 
    label.html('Show'); 
}

来源

2011-11-30 01:51:09

jquery切换标签

回答

相关问题