Question

我试图创建可点击的文本（并最终）创建一个自定义按钮，这些按钮将在定义的区域中生成文本。当我点击“这将生成文本”时，它会在那里闪烁一秒钟而消失。

注意：最后会有多个按钮在同一区域生成文本，所以我需要替换文本。

CSS

#wrapper {
    margin: 0px;
    height: 500px;
    width: 500px;
}
a:hover{
    color: #0FC;
}
#button {
    height: 100px;
    width: 100px;
    float:left
}
#text{
    margin: 0px;
    height: 495px;
    width: 395px;
    float:left;
    border-style:solid;
    border-width:thin;
}

的Javascript

   <script>
    function myFunction()
    {
    document.getElementById("text").innerHTML="My First JavaScript Function";
    }
   </script>
   </head>

HTML

<body>
   <div id="wrapper">
   <div id="button">   
<p><a href="">
<span onclick="myFunction()">This will generate the text</span>
</a></p>
   </div> 
   <div id="text"></div>
   </div>
   </body>

Answer 1

问题是您的<a>标记没有链接到任何内容。当您单击它时，它将尝试通过该“空”链接。您可以通过简单地添加<a href="#"> ...或同时删除<a>所有内容并使用css设置<p>样式来修复它，使其看起来像您想要的那样可点击。

方法1：http://jsfiddle.net/eshellborn/VXD4K/

方法2：http://jsfiddle.net/eshellborn/VXD4K/2/

Answer 2

由于您的<a>标记为空，当您点击它时，它会重新定位页面。相反请尝试以下操作：

<p><a href="#"><span onclick="myFunction()">This will generate the text</span>
</a></p>

Demo

Answer 3

如果您要尝试显示文字，可以使用<div>标记来执行此操作：

<div id="textgen" style="display: none">Your Text Here</div>
<button id="button" onclick="genText()">Your button text</button>
<script>
 function genText() {
  document.getElementById("textgen").style.display = 'block';
}
</script>

并且可选地，您可以使用this JSFiddle HTML代码来使其更加复杂和有趣。

如何使用按钮/可点击区域生成文本？

3 个答案: