Question

我被困住了。我有一个带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>

Tab Divs

<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;



}

由于

Answer 1

快速解决方案是拨打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');

Answer 2

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')">

当我向别人展示时，需要隐藏显示的div

2 个答案: