我在一个网站上查看一些 HTML 编码,我看到很多网站使用这 3 个点 (...) 来隐藏 2 个 <> 之间的代码位。
示例: https://i.stack.imgur.com/Gpy9r.jpg
当您单击这些点时,会打开更多代码,您可以阅读 2 个 <> 中的内容。
示例 2:https://i.stack.imgur.com/t2tYS.jpg
所以我的问题是,我如何在我自己的代码中做到这一点?就像我有 <> 很多文本 <> 一样,我如何使 <> 的 3 个点内的文本只有在您单击它们时才可见(以节省空间)。
提前致谢!
答案 0 :(得分:0)
我阅读了您的问题并提出了此解决方案,并且运行良好。
<html>
<head>
<style>
.alterabletext{
display: inline-block;
cursor: pointer;
}
</style>
<title>EXAMPLE</title>
</head>
<body>
<div class="content">
< <div class="alterabletext" onclick="myFunc()" id="alterabletext">...</div> >
</div>
<script>
function myFunc(){
var element = document.getElementById("alterabletext");
element.innerHTML="A LOT OF TEXT";
}
</script>
</body>
</html>
我希望这能如您所愿。美好的一天!
答案 1 :(得分:0)
我阅读了您的问题并提供了这个简单的解决方案。看起来不错!
<html> <!-- Start the document -->
<head>
<!-- Ads some styles -->
<style>
.demo { /* Gets the element by the CLASS */
cursor: pointer; /* Use cursor:pointer to make a pointer cursor :-) */
/* Optional. do not include this... */
font-size: 20px;
color: black;
padding: 10px;
}
</style>
<title>EXAMPLE</title> <!-- Ads a title to your webpage -->
</head>
<body>
<span style="float: right;">< <span class="demo" onclick="myFunction()" id="demo">⋮</span> ></span>
<script>
function myFunction(){
var x = document.getElementById("demo"); // Creates an variable to help us change the text - this variable identifies the element from the DOM (HTML tag)
x.innerHTML="Lot's of text!"; // Get the element from the variable and change it
}
</script>
</body>
</html>
美好的一天!
PS:寻找 <
和 >
是什么意思?检查What do < and > stand for?
Tiago R.