Question

我正在尝试使用div来显示我页面上的内容。这是通过选择菜单中的onchange元素控制的。它工作得很完美，但问题是我希望在打开另一个div时关闭一个div。 div的公开罚款，但不会关闭其他人。下面是一个示例代码。我做错了什么？

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>

Answer 1

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

Answer 2

很难说没有看到你的标记，但它可能就像这样简单：

示例： 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>

Answer 3

您可以使用纯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/

Answer 4

安装jquery;

将此代码用作选择框的html标记。记得为每个选项值指定id = visibiitySelector并提供属性“_showelement”，如果选择了该选项，则与要显示的div的id匹配

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

将此功能复制到页面的javascripts中

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

将div编码如下，记得提供“showhide”类

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

Div的可见性与javascript - 问题

4 个答案: