Div的能见度与javascript - 问题

我想用div来在我的页面上显示内容。这由选择菜单中的onchange元素控制。它完美的工作，但问题是我想要一个div关闭，当另一个打开。该div的开放罚款，但它并没有关闭其他人。下面是一个示例代码。我究竟做错了什么？Div的能见度与javascript - 问题

的JavaScript：

if(document.getElementById('catgry').value == '01'){ 
    document.getElementById('post04').style.visibility = "visible"; 
    document.getElementById('post04').style.display = ""; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}else if(document.getElementById('catgry').value == '02'){ 
    document.getElementById('post02').style.visibility = "visible"; 
    document.getElementById('post02').style.display = ""; 

    document.getElementById('post04').style.visibility = "hidden"; 
    document.getElementById('post04').style.display = "none"; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}

HTML：

<div id="post04" style="visibility:hidden; display:none;"> 
    <table class="posttb"><tr> 
    <td width="30%">Author</td> 
    <td><input type="text" name="author" size="30" class="postfd"></td> 
    </tr> 
</table> 

</div>

来源

2011-01-09 sammville

你可以通过将显示规则CSS和公正的添加和移除类的div的简化问题。 – keithjgrant 2011-01-09 01:32:28

@sammville现场演示：http://jsfiddle.net/9Tx7g/ – 2011-01-09 01:33:32

没有你*不需要使用jQuery。但是你目前的方法效率很低。如果我们对HTML有更全面的了解，那么了解最佳方法会更容易。 'post0x`元素是否是兄弟姐妹？如果是这样，他们的父容器是否有ID？ – user113716 2011-01-09 01:35:11

硬盘，没有看到您的标记说，但它可能是为这样简单：

例子：http://jsfiddle.net/jtfke/

var posts = document.getElementById('posts').children; 

document.getElementById('catgry').onchange = function() { 
    for(var i = 0, len = posts.length; i < len; i++) { 
     posts[ i ].style.display = (i == this.selectedIndex) ? 'block' : ''; 
    } 
};

例如HTML

<select id='catgry'> 
    <option value='post01'>post 1</option> 
    <option value='post02'>post 2</option> 
    <option value='post03'>post 3</option> 
    <option value='post04'>post 4</option> 
</select> 
<div id='posts'> 
    <div>post 1 content</div> 
    <div>post 2 content</div> 
    <div>post 3 content</div> 
    <div>post 4 content</div> 
</div>

来源

2011-01-09 01:46:41 user113716

考虑使用jQuery和jQuery的手风琴 http://jqueryui.com/demos/accordion/

来源

2011-01-09 01:12:47 Vadim

中安装jQuery;

将此代码用作选择框的html标记。记得指定ID = visibiitySelector和providean属性“_showelement”每个选项的值，与要显示，如果选项被选中

<select id="visibilitySelector"> 
    <option value="whatever" _showelement="post01">whatever</option> 
    <option value="whatever" _showelement="post02">whatever</option> 
</select>

拷贝功能到

页面的JavaScript的div的ID一致

$(document).ready(function(){ 
    $('#visibilitySelector').change(function(){ 
     var showelement = $('#visibilitySelector option:selected').attr('_showelement'); 
     $('div.showhide').not('#' + showelement).hide(); 
     $('#' + showelement).show(); 
    }); 
});

代码如下的div，记住要提供一流的“显示隐藏”

<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div>

来源

2011-01-09 01:33:13 Maurizio

你可以用纯JavaScript和一些循环做到这一点。

<form method="post" action="#"> 
    <select id="selectMenu"> 
     <option id="option1" value="option 1">option 1</option> 
     <option id="option2" value="option 2">option 2</option> 
     <option id="option3" value="option 3">option 3</option> 
    </select> 
</form> 

<div id="div1" class="postDiv">Div 1</div> 
<div id="div2" class="postDiv">Div 2</div> 
<div id="div3" class="postDiv">Div 3</div> 

<script type="text/javascript"> 
init(); 


function init() 
{ 
    addListeners(); 
} 

function addListeners() 
{ 
    document.getElementById("selectMenu").onchange = selectChange; 
} 

function selectChange(evt) 
{ 
    for(var i=0;i<evt.currentTarget.length;i++) 
    { 
     if(i == evt.currentTarget.selectedIndex) 
     { 
      adjustDivs(i+1, evt.currentTarget.options); 
     } 
    } 
} 

function adjustDivs(optionId, options) 
{ 
    document.getElementById("div" + optionId).style.display = "block"; 
    for(var i=0;i<options.length;i++) 
    { 
     if(i != (optionId-1)) 
     { 
      document.getElementById("div" + (i+1)).style.display = "none"; 
     } 
    } 
} 
</script>

http://jsfiddle.net/hGxfS/

来源

2011-01-09 02:03:32

Div的能见度与javascript - 问题

回答

相关问题