[英]How to make text appear and disappear when a div is clicked on?
嗨，我对网络开发很陌生，正在练习我学到的一些东西。
我建立了一个日夜切换的基本程序。 点击太阳时，月亮出现，反之亦然。 你可以看到文字“Good Afternoon！” 和“晚安！” 显示为默认值。 我希望能有“下午好！” 只有在太阳出现时才会出现并且“晚安！” 仅在月亮出现时出现。 任何帮助，将不胜感激。
这是小提琴 。
我尝试了类似的东西来模仿其他代码，但我知道这是不正确的。
/*toggle text*/
if ($('#daytext').hasClass('visible')) {
$('#daytext').removeClass('visible');
} else {
$('#daytext').removeClass('visible');
}
您可以使用CSS属性来实现此目的。
看看visibility : hidden; 并display : none; 。
从这里开始 ，“另一个常见的显示值是none。一些特殊的元素如脚本使用它作为默认值。它通常与JavaScript一起使用来隐藏和显示元素而不真正删除和重新创建它们。
这与可见性不同。 将display设置为none将呈现页面，就好像该元素不存在一样。 visibility: hidden; 将隐藏元素，但元素仍将占用它完全可见的空间。“
更新了小提琴 。
你只是要隐藏Good Night! 默认情况下，当您使用jQuery方法show()/hide()单击时切换可见性：
if ($('#orb').hasClass('sun')) {
$('#daytext').hide();
$('#nighttext').show();
$('#orb').removeClass('sun').addClass('moon');
} else {
$('#daytext').show();
$('#nighttext').hide();
$('#orb').removeClass('moon').addClass('sun');
}
希望这可以帮助。
$(document).ready(function() { $('#orb').click(function() { /*Day and night toggle*/ if ($('#orb').hasClass('sun')) { $('#daytext').hide(); $('#nighttext').show(); $('#orb').removeClass('sun').addClass('moon'); } else { $('#daytext').show(); $('#nighttext').hide(); $('#orb').removeClass('moon').addClass('sun'); } if ($('#sky').hasClass('day')) { $('#sky').removeClass('day').addClass('night'); } else { $('#sky').removeClass('night').addClass('day'); } /*toggle visible moonspots*/ if ($('#moonspot1').hasClass('visible')) { $('#moonspot1').removeClass('visible'); } else { $('#moonspot1').addClass('visible'); } if ($('#moonspot2').hasClass('visible')) { $('#moonspot2').removeClass('visible'); } else { $('#moonspot2').addClass('visible'); } if ($('#moonspot3').hasClass('visible')) { $('#moonspot3').removeClass('visible'); } else { $('#moonspot3').addClass('visible'); } /*toggle text*/ if ($('#daytext').hasClass('visible')) { $('#daytext').removeClass('visible'); } else { $('#daytext').removeClass('visible'); } }); });
#orb { height: 300px; width: 300px; border-radius: 100%; padding: 20px; margin: auto; position: absolute; top: 0; left: 0; botton 0; right: 0; } #sky { height: 100%; width: 100%; } .sun { background-color: #ffdd00; border: 10px solid #f1c40f; } .sun:hover { border: 20px solid #f1c40f; } .moon { background-color: #bdc3c7; border: 10px solid #eaeff2; } .moon:hover { border: 20px solid #eaeff2; } .night { background-color: #2c3e50; } .day { background-color: #aaecf2; } #moonspot1 { height: 50px; width: 50px; border-radius: 100%; float: right; margin: 20px; } #moonspot2 { height: 80px; width: 80px; border-radius: 100%; float: right; margin: 20px; } #moonspot3 { height: 150px; width: 150px; border-radius: 100%; float: right; margin: 20px; } .visible { background-color: #eaeff2; } #daytext { font-size: 50px; font-family: Optima; } #nighttext { font-size: 50px; font-family: Optima; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="sky" class="day"> <div id="orb" class="sun"> <div id="moonspot1"></div> <div id="moonspot2"></div> <div id="moonspot3"></div> </div> <div id = "daytext">Good Afternoon!</div> <div id = "nighttext" style='display:none'>Good Night!</div> </body>
无需切换这么多课程。 我清理了你的代码，告诉你如何只在.day和.night类之间切换来完成同样的事情。 我正在使用display: none隐藏不相关的元素，具体取决于该状态。
$(document).ready(function() { $('#orb').click(function() { /*Day and night toggle*/ if ($('#sky').hasClass('day')) { $('#sky').removeClass('day').addClass('night'); } else { $('#sky').removeClass('night').addClass('day'); } }); });
#sky { height: 100%; width: 100%; } .night { background-color: #2c3e50; } .day { background-color: #aaecf2; } #orb { height: 300px; width: 300px; border-radius: 50%; padding: 20px; margin: auto; position: absolute; top: 0; left: 0; botton 0; right: 0; } .sun { background-color: #ffdd00; border: 10px solid #f1c40f; } .sun:hover { border: 20px solid #f1c40f; } /* styling the #sky.night .sun to be the moon */ .night .sun { background-color: #bdc3c7; border: 10px solid #eaeff2; } .night .sun:hover { border: 20px solid #eaeff2; } /* common styles for the 3 moonspots */ .moonspot { background-color: #eaeff2; border-radius: 50%; float: right; margin: 20px; } /* hide moonspots during day */ .day .moonspot { display: none; } #moonspot1 { height: 50px; width: 50px; } #moonspot2 { height: 80px; width: 80px; } #moonspot3 { height: 150px; width: 150px; } .text { font-size: 50px; font-family: Optima; /* position & z-index to put text above other elements */ position: relative; z-index: 1; } /* hide the irrelevant text based on day/night */ .day #nighttext { display: none; } .night #daytext { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="sky" class="day"> <div id="orb" class="sun"> <div class="moonspot" id="moonspot1"></div> <div class="moonspot" id="moonspot2"></div> <div class="moonspot" id="moonspot3"></div> </div> <div class="text" id="daytext">Good Afternoon!</div> <div class="text" id="nighttext">Good Night!</div> </body>
你可以做几件事。 由于您使用的是jQuery，因此以下是一个选项。
在$(document).ready()您可以添加以下内容。
$('#nighttext').toggle();
然后在您单击功能中，您可以执行以下操作：
$('#daytext').toggle();
$('#nighttext').toggle();
您还可以为文本创建一个div ，并在点击时更改文本以及它的类。
如何使div在一次单击超链接时出现并在再次单击超链接时消失？ 可以重复吗？
[英]How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.