Question

我一直在为此殴打自己两天，无法提出解决方案。我是一名网页设计师，很少自己使用JS，所以这可能很容易解决。项目规范包括构建Web页面，使用哈希标记作为链接占位符。我需要一个JS代码来使用HTML在弹出窗口中显示链接位置。我有一个良好的开端并进行了大量修改以尝试使其工作，但如果单击链接，我需要JS引用多个href位置。

到目前为止我已经设置了一个测试页面 - 似乎第一个按钮工作正常，但是当我关闭弹出窗口并尝试打开第二个链接时 - 没有任何反应。有人能帮我吗？（请 - 我在截止日期和绝望）！

这是我到目前为止所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>

<link rel="stylesheet" type="text/css" href="pop-up-styles.css">


<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script> 

<script type="text/javascript"> 
    function myFunction() {
    var x = document.getElementById("myAnchor").href;
    document.getElementById("demo").innerHTML = x;
}
//-->
</script>
</head>

<body>

<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a id="myAnchor" href="http://www.BoxOne.com" onclick="myFunction()"></a></p>
<button id="on-top" onclick="myFunction()">Click Here for href Reference</button>
<p id="demo"></p>
<input type="reset" value="Close" onClick="toggle_visibility('popup-box1');">
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="popup-box2" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a id="myAnchor" href="http://www.BoxTwo.com" onclick="myFunction()"></a></p>
<button id="on-top" onclick="myFunction()">Click Here for href Reference</button>
<p id="demo"></p>
<input type="reset" value="Close" onClick="toggle_visibility('popup-box2');">
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="wrapper">
<p><a id="myAnchor" href="#BoxOne.com" onclick="toggle_visibility('popup-box1');">Open Box 1</a>                </p>
<p><a id="myAnchor" href="#BoxTwo.com" onclick="toggle_visibility('popup-box2');">Open Box 2</a>    </p>
</div>

</body>
</html>

Answer 1

您的功能应如下所示：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block') {
       e.style.display = 'none';
   }

   else  {
       e.style.display = 'block';
   }

}

不要忘记括号

然后你不能给多个元素赋予相同的ID。

我编辑了一下，但它仍远不是一个结构良好的脚本。非常基本而且不灵活。

但是，为了给你一个起点，试着解决这个问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>

<link rel="stylesheet" type="text/css" href="pop-up-styles.css">


<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block') {
           e.style.display = 'none';
       }

       else  {
           e.style.display = 'block';
       }

    }
</script> 

<script type="text/javascript"> 
    function myFunction(url,box) {
    document.getElementById(box).innerHTML = url;
}
//-->
</script>
</head>

<body>

<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a href="http://www.BoxOne.com" onclick="myFunction()"></a></p>
<button onclick="myFunction('http://www.BoxOne.com','demo#1')">Click Here for href Reference</button>
<p id="demo#1"></p>
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="popup-box2" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<h1 id="on-top">my own pop up</h1>
<p><a href="http://www.BoxTwo.com" onclick="myFunction(this)"></a></p>
<button onclick="myFunction('http://www.BoxTwo.com','demo#2')">Click Here for href Reference</button>
<p id="demo#2"></p>
</div><!--container-->
</div><!--wrapper-->
</div><!--box1-->

<div id="wrapper">
<p><a id="myAnchor" href="#BoxOne.com" onclick="toggle_visibility('popup-box1');">Toggle Box 1</a>                </p>
<p><a id="myAnchor" href="#BoxTwo.com" onclick="toggle_visibility('popup-box2');">Toggle Box 2</a>    </p>
</div>

</body>
</html>

如果这有帮助，请将其标记为正确，以便其他人可以看到它:) 最好的问候

Javascript：在HTML弹出窗口中引用href位置

1 个答案: