gpt4 book ai didi

javascript - jquery 切换标签

转载 作者:行者123 更新时间:2023-12-02 19:58:29 26 4
gpt4 key购买 nike

如何让标签切换显示/隐藏?下面是我的代码,目前它也正在显示。我希望它从显示切换到隐藏,然后从隐藏切换回显示。当显示显示时,div将被隐藏,但是当单击显示时,标签将切换到隐藏,并且div将被显示,当单击隐藏时,标签将返回显示,并且div将被隐藏

  <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>

最佳答案

如果我正确地阅读了你的问题,那么我认为以下内容会起作用:

$('#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 元素关联起来,而不是任意元素的通用标识符。理想情况下,您应该使用 spandiv 元素而不是 label 来实现此目的。

如果您确实切换到使用非 label 元素,那么也不应该使用 for 属性,而是我建议的位置(假设相同)使用自定义 data-* 属性(例如 data-for)在当前的 labeldiv 之间建立连接>) 来识别关系。

另请注意,在上面的 -final- 示例中,使用 class 而不是 id 选择器,因为 id 在文档中必须是唯一的

关于javascript - jquery 切换标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8320159/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com