纯CSS答案

Question

这是我的CSS：

div.hide { 
     display:none; 
     }
div.show {
     color: #66CCFF;
     }

这是我的HTML：

<a href="http://www.website.com/#16:10">16:10</a>

<script language="JavaScript">
    function showText(show,hide)
    {
        document.getElementById(show).className = "show";
        document.getElementById(hide).className = "hide";
    }
</script>

<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>

我正在尝试让第一个链接显示“这是你的显示器宽高比”。页面下方的文字。

非常感谢任何帮助。

Answer 1

纯CSS答案

好的，如果你只是想在使用anchor标签移动到页面中的某个位置后附加文字，那么可以除了类似于以下内容的CSS之外什么都不做：

 a:target:after{
    content: " Test";
    background-color: #ccffcc;
 }

这样做是在活动锚点和颜色之后附加文本“Test”。这是一个带有实现的示例页面：

<!DOCTYPE html>
<html>
   <head>
      <title>Link Printer 2</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
         a:target:after{
            content: " Test";
            background-color: #ccffcc;
         }
         .bigSection{
            height: 200px;
         }
      </style>
   </head>
   <body>
      <div class="bigSection">
         <div><a name="first">First</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
      <div class="bigSection">
         <div><a name="second">Second</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
      <div class="bigSection">
         <div><a name="third">Third</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
   </body>
</html>

使用JavaScript回答

您需要绑定eventListener并阻止它移动到下一页。以下是使用JavaScript或CSS执行此操作的方法。 JavaScript方式实际上将文本设置为您想要的任何内容。 CSS方式将隐藏实际隐藏元素。

<!DOCTYPE html>
<html>
   <head>
      <title>Link Printer</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
         .hide{
            display: none;
         }
      </style>
      <script>
         function jsShowText(event) {
            var divToManip = document.getElementById("text");
            if (divToManip.innerHTML === "") {
               divToManip.innerHTML = "Hello";
            }
            else {
               divToManip.innerHTML = "";
            }
            event.preventDefault();
         }
         function cssShowText(event) {
            var divToManip = document.getElementById("text");
            if (divToManip.className === "") {
               divToManip.className = "hide";
            }
            else {
               divToManip.className = "";
            }
            event.preventDefault();
         }
         function setListeners() {
            document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
            document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
         }
         window.onload = setListeners;
      </script>
   </head>
   <body>
      <div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
      <div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
      <div id="text">I'm text</div>
   </body>
</html>

Answer 2

“showText”必须收到一个id参数，用于调用“document.getElementById”

试试这个，只需点击一下即可显示以下文字的链接：

<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>

<script language="JavaScript">
   function showText(id)
    {
        document.getElementById(id).style.display = "block";
    }
</script>

<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>

我只是使用样式显示来隐藏/显示元素。希望它有所帮助。

Answer 3

只需改变你的css：

div.show {
    display:block;
    color: #66CCFF;
}

Answer 4

在这里，我将提供一个我正在工作的例子，感谢Alberto Montellano的例子，这给了我一个想法，但最后需要的东西有点不同，可选择不显示数据并仅在我单击时显示它，并在再次单击时使其消失。在这个例子中，我将给你两个选择;你可以有一个按钮或一个链接来触发JS功能来显示和隐藏正文文本，你可以选择你想要的按钮或链接是我发表评论的方式（可选），两者都表现得一样，它是取决于你想要使用哪一个。

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>

<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>


<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>

<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>


<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>


<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>

<!-- JS -->
<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>

单击链接时显示文本

4 个答案:

纯CSS答案

使用JavaScript回答