0

我被困住了。我有一个带有 3 个按钮的页面，这 3 个按钮做了几件事——它们改变了 div 的样式，它们还显示/隐藏了一个内容 div。div 样式的更改效果很好，但我遇到了内容 div 的问题。如果您登陆页面并单击“我们的品牌”选项卡，然后单击其他 2 个选项卡，它工作正常。如果您登陆该页面并首先单击“最新消息”或“关于我们”，则显示/隐藏无法正常工作 - 直到您实际单击“我们的品牌”。

http://www.adriancollins.net/clients/kennys/

任何帮助将不胜感激，我首先是一名设计师，大约是 9000 名开发人员。

显示/隐藏代码

<script type="text/javascript">

var _hidediv = null;
function showdiv(id) {
if(_hidediv)
    _hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>

选项卡 div

<div id="brand_button"><a href="#" onClick="showdiv('brands_content');     lower.className='blue';angle.className='blue_angle';return false"><img src="wp-content/uploads/2012/10/brands_button.png"></a></div>

<div id="whatsnew_button"><a href="#" onClick="showdiv('new_content');lower.className='black';angle.className='black_angle';return false"><img src="wp-content/uploads/2012/10/whatsnew_button.png"></a></div>

<div id="about_button"><a href="#" onClick="showdiv('about_content');lower.className='green';angle.className='green_angle';return false"><img src="wp-content/uploads/2012/10/about_button.png"></a></div>

内容分区

<div id="brands_content">Content...</div>
<div id="new_content">Content...</div>
<div id="about_content">Content...</div>

CSS

#brands_content

{
position: relative;
display: block;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 12;


}



#new_content

{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;
color: #fff;



}



#about_content

{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;    
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;



}

谢谢

4

2 回答 2

0 
You can change your body tag to be:

<body class="home page page-id-5 page-template page-template-home-php">

to

<body class="home page page-id-5 page-template page-template-home-php" onload="showdiv('brands_content')">
于 2012-10-23T23:08:26.703 回答
0

一个快速的解决方案是调用 showdiv('brands_content'); 加载完所有 html 后，您就有效地单击了“我们的品牌”，一切都按预期运行。

<div id="brand_button"><a href="#" onClick="showdiv('brands_content');     lower.className='blue';angle.className='blue_angle';return false"><img src="wp-content/uploads/2012/10/brands_button.png"></a></div>

 <div id="whatsnew_button"><a href="#" onClick="showdiv('new_content');lower.className='black';angle.className='black_angle';return false"><img src="wp-content/uploads/2012/10/whatsnew_button.png"></a></div>

<div id="about_button"><a href="#" onClick="showdiv('about_content');lower.className='green';angle.className='green_angle';return false"><img src="wp-content/uploads/2012/10/about_button.png"></a></div>
showdiv('brands_content');
于 2012-10-23T23:01:49.573 回答