我在我的客户网站上创建了一个点击显示选项。哪个在那里工作得很好。 其代码如下。
<style>
a{padding:0;margin:0;color:#009cbb;font-weight:bold;text-decoration:none;}
</style>
<p>
<div><a href="#welcome" onclick="toggle_visibility('welcome');">Welcome</a></div>
<div id="welcome" style="display:none;">This is test</div>
<div><a href="#focus" onclick="toggle_visibility('focus');">Focus</a></div>
<div id="focus" style="display:none;">This is test2
</div>
<div><a href="#cataracts" onclick="toggle_visibility('cataracts');">Cataracts</a></div>
<div id="cataracts" style="display:none;">This is test2
</div>
</p>
<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>
当我从外部页面链接test1时它应该显示test1并保持关闭另外2,但问题是当我点击链接时它显示所有这些已关闭。
链接代码是
<a href="http://website.com/page.php#welcome" style="color:#009bd9;text-decoration:none;">Read More ></a>
当有人点击时,请帮助我阅读更多信息,它会将欢迎信息显示为已打开,其他人则显示已关闭。
由于
答案 0 :(得分:1)
试试这个 - 在Windows上的IE8,Chrome32和Fx 24中测试
function toggle_visibility(link) {
var id = link.hash.substring(1);
var obj = document.getElementById(id);
if (obj) obj.style.display = obj.style.display == "block"?"none":"block";
return false;
}
window.onload=function() {
var id = location.hash?location.hash.substring(1):"";
if (id) document.getElementById(id).style.display="block";
}
在每个链接上使用这种格式(也应该重构为不引人注目的)
onclick="return toggle_visibility(this);"
请注意 (this)
答案 1 :(得分:1)
HA我终于找到了你想要的东西!
因此,如果链接以#element_id
结尾,您希望在页面加载时打开该元素。
目前您的脚本标记:
<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 toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
var parts = window.location.split('#'),
hash = '';
if (parts.length > 1) {
hash = parts[1];
}
if (hash !== '') {
toggle_visibility(hash);
}
</script>
编辑:
window.location.hash
显然在任何地方都受到支持。您可能希望使用它而不是string.split()
答案 2 :(得分:0)
window.onload = function(){
toggle_visibility(window.location.hash.substring(1));
}
答案 3 :(得分:0)
虽然我没有清楚地理解你的问题,但我已根据我的假设修改了你的功能。
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.visibility == 'visible') {
e.style.display = 'none';
e.style.visibility = "hidden";
} else {
e.style.display = 'block';
e.style.visibility = 'visible';
}
}
请告诉我们您需要的修改内容。