Question

我的头衔可能有点令人困惑，我真的不知道怎么说。我基本上想要实现的目标（对于网站vhawley.com）就是这张图片中的所有内容，我知道，它的绘制效果不佳。

我只是注意到，由于缺乏声誉，我无法上传图片，所以这里有一个链接。 www.vhawley.com/moc-up

如果您访问该网站vhawley.com，您会看到那里的小默认按钮，当您点击它们时，它们会打开有关每个“主题”的更多信息。我想要做的是摆脱按钮，而不是像你在图片中看到的div。这是我现在的页面代码。

    <!DOCTYPE HTML>
<html>
<div id="site">
<title>Victoria Hawley</title>
<head>

<link rel="stylesheet" media="all and (min-width: 1378px)" href="grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="grid-400.css">

<link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>


</head>
<div id="openImage">
</div>

<body>

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<input type="button" onclick="return toggleMe('VictoriaHawley')" value="Victoria Hawley"><br>
<div id="VictoriaHawley" style="display:none">
This is all about Victoria!
</div>

<input type="button" onclick="return toggleMe('Theatre')" value="Theatre"><br>
<div id="Theatre" style="display:none">
This is all about theatre!
</div>

<input type="button" onclick="return toggleMe('Gallery')" value="Gallery"><br>
<div id="Gallery" style="display:none">
This is her gallery!
</div>

<input type="button" onclick="return toggleMe('Upcoming')" value="Upcoming"><br>
<div id="Upcoming" style="display:none">
This is all about her upcoming shows!
</div>

<input type="button" onclick="return toggleMe('Contact')" value="Contact"><br>
<div id="Contact" style="display:none">
This is all about how to contact her!
</div>



</body>
</html>

如果它显示“input type =”button“，我知道我不能只放div，但是解决方法是什么？

感谢您的帮助，很抱歉打扰。

Answer 1

您可以直接替换div，只需使用您定义的onclick方法

<div style="border:1px solid black" onclick="return toggleMe('VictoriaHawley')">
Victoria Hawley
</div>
<div id="VictoriaHawley" style="display:none">
This is all about Victoria!
</div>

您可以在此处查看一个有效的示例http://jsfiddle.net/24aMD/1/

使用输入标记创建扩展/收缩框

1 个答案: