0

我有一个基本页面，其中有一个“添加链接”按钮，点击后会弹出一个窗口。弹出窗口有一个输入链接的表单域。输入链接后，我想刷新基本页面 - 基本页面不应再是“添加链接”，而是更改为在弹出窗口中输入的超链接。

我是 Javascript 和 html 的新手。到目前为止，我已经设法在基本页面上创建了一个按钮，单击时会显示一个带有链接表单字段的弹出窗口。但是，我无法使用新链接刷新基本页面。

下面是我的代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Add Link</button>

<p id="demo"></p>

<script>
function myFunction()
{
    prompt("Please Enter the Link"); 
}
</script>

</body>
</html>
4

3 回答 3

0

您需要某种方式将链接存储在服务器上；刷新页面将导致所有内容都重新执行，并且您不能真正动态地从自身更改 html 文件。带有 postgresql 数据库的 django 之类的东西很容易设置，但这超出了您的问题范围。

也就是说，如果您可以在刷新页面时让链接失效，您可以使用文本区域而不是提示。如果您有 jQuery，这是一个示例：

<head>
<script>
$(function() {
$("#addLink").click(function() {
    var linkStr = document.getElementById("linkInput").value;
    $("#linkArea").html("<a href=" + linkStr + ">Your link</a>");
});
})
</script>
</head>

<span id="linkArea">
    <input id="addLink" type="submit" value="Add Link: ">
    <input id="linkInput" type="text" value="(enter link)">
</span>

这是一个 jsfiddle 试用：http: //jsfiddle.net/tRcUp/

哦，通常你应该把脚本放在 head 标签中。

于 2013-07-10T19:27:32.177 回答
0

尝试这个：

<button onclick="myFunction()">Add Link</button>

<p id="demo"></p>

<script>
function myFunction()
{
    var url = prompt("Please Enter the Link"); 
    window.location = url;
}
</script>

http://jsfiddle.net/douglasloyo/rtghQ/ js fiddle 中唯一可接受的值是http://jsfiddle.net/

干杯

于 2013-07-10T19:15:52.363 回答
0

以下将做的是每次点击按钮时，都会显示提示，一旦提示关闭，脚本将向div添加一个新<a href=value>New Link</a>标签。demo

<!DOCTYPE html>
<html>
    <body>
        <button onclick="myFunction()">Add Link</button>
        // This needs to be a 'div' so it can have elements inside it.            
        <div id="demo"></div> 
        <script>
            var demo = document.getElementById('demo');
            function myFunction()
            {
                // Stores the value from the prompt() in the variable 'value'
                var value = prompt("Please Enter the Link"); 
                var link = document.createElement('a'); // Create an <a> tag
                link.setAttribute('href', value); // Set the link's URL to the value.
                link.innerHTML = "New Link"; // Set the link's display text.
                demo.appendChild(link); // Add the link to the demo div.
            }
        </script>
    </body>
</html>

希望评论解释它是如何工作的，如果不只是在这里问:)

于 2013-07-10T19:22:38.133 回答