除非你在 HTML(or XHTML) 中点击它,否则如何隐藏一个段落
How to have a paragraph that is hidden unless you click on it in HTML(or XHTML)
我在使用 XHTML 的 Confluence 中使用 python 编写页面,我希望新页面包含一个段落,该段落在人们访问该页面时被隐藏或截断但可以看到如果人们点击它。
请检查我附上的两张图片,以便更好地说明我想要什么
您可以使用 jquery 来实现。假设您使用图标来说明这 3 个点。
<html>
<style>#hidden_para{display:none;} /* Hide the paragraph*/</style>
<p>This is a non hidden paragraph</p>
<img id="icon" src="3dottedicon.png">
<!-- Add an id attib to the paragraph -->
<p id="hidden_para">This is a hidden paragraph</p>
</html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$("#icon").click(function(){
$(this).hide(); //this keyword refers to the icon itself.
//Access the element with the ID hidden_para and override the CSS.
$("#hidden_para").show();
});
</script>
执行上述代码时,它首先隐藏图标,然后将样式属性添加到 ID 为 hidden_para 的元素,如 style="display:block;"(这会覆盖 CSS指定)
希望对您有所帮助!
我在使用 XHTML 的 Confluence 中使用 python 编写页面,我希望新页面包含一个段落,该段落在人们访问该页面时被隐藏或截断但可以看到如果人们点击它。 请检查我附上的两张图片,以便更好地说明我想要什么
您可以使用 jquery 来实现。假设您使用图标来说明这 3 个点。
<html>
<style>#hidden_para{display:none;} /* Hide the paragraph*/</style>
<p>This is a non hidden paragraph</p>
<img id="icon" src="3dottedicon.png">
<!-- Add an id attib to the paragraph -->
<p id="hidden_para">This is a hidden paragraph</p>
</html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$("#icon").click(function(){
$(this).hide(); //this keyword refers to the icon itself.
//Access the element with the ID hidden_para and override the CSS.
$("#hidden_para").show();
});
</script>
执行上述代码时,它首先隐藏图标,然后将样式属性添加到 ID 为 hidden_para 的元素,如 style="display:block;"(这会覆盖 CSS指定)
希望对您有所帮助!