分区'；javascript的可见性-问题_Javascript_Css

分区'；javascript的可见性-问题

javascript css

分区'；javascript的可见性-问题,javascript,css,Javascript,Css,我正在尝试使用div在我的页面上显示内容。这由选择菜单中的onchange元素控制。它工作得很好，但问题是我希望一个div在另一个div打开时关闭。该分区的开放性很好，但其他分区没有关闭。下面是一个示例代码。我做错了什么 JavaScript: if(document.getElementById('catgry').value == '01'){ document.getElementById('post04').style.visibility = "visible"; do

我正在尝试使用div在我的页面上显示内容。这由选择菜单中的onchange元素控制。它工作得很好，但问题是我希望一个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:


作者

考虑使用jQuery和jQuery手风琴

考虑使用jQuery和jQuery手风琴安装jquery

将此代码用作选择框的html标记。请记住为每个选项值指定id=visibiitySelector和providean属性“\u showelement”，该属性与选择选项时要显示的div的id相匹配

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

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

安装jquery

将此代码用作选择框的html标记。请记住为每个选项值指定id=visibiitySelector和providean属性“\u showelement”，该属性与选择选项时要显示的div的id相匹配

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

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

如果看不到您的标记，很难说，但它可以是这么简单：

示例：

var posts=document.getElementById（'posts'）.children；
document.getElementById（'catgry'）。onchange=function（）{
for（变量i=0，len=posts.length；i


示例html

职位1
职位2
职位3
邮政4
Post1内容
Post2内容
Post3内容
Post4内容
如果看不到您的标记，很难说，但它可以是这么简单：
示例：
var posts=document.getElementById（'posts'）.children；
document.getElementById（'catgry'）。onchange=function（）{
for（变量i=0，len=posts.length；i

示例html

职位1
职位2
职位3
邮政4
Post1内容
Post2内容
Post3内容
Post4内容
您可以使用纯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>


选择1
选择2
选择3
第一组
第2组
第3组
init（）；
函数init（）
{
addListeners（）；
}
函数addListeners（）
{
document.getElementById（“selectMenu”）.onchange=selectChange；
}
功能选择更改（evt）
{
对于（var i=0；i，可以使用纯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>


选择1
选择2
选择3
第一组
第2组
第3组
init（）；
函数init（）
{
addListeners（）；
}
函数addListeners（）
{
document.getElementById（“selectMenu”）.onchange=selectChange；
}
功能选择更改（evt）
{
对于（var i=0；iYou可以通过将显示规则放在CSS中并只向div添加和删除类来简化问题。@sammville Live demo：不，您不需要使用jQuery。但是您当前的方法效率非常低。如果我们对您的HTML有一个更完整的了解，那么就更容易知道最佳方法了。post0x
元素同级？如果是，它们的父容器是否具有ID？+1到“patrick dw”…为什么所有的事情都应该用jQuery来完成？jQuery在javascript世界中不是上帝…@WarrenFaith我看到你试图质疑jQuery在javascript世界中作为上帝的角色。你可以将显示规则放在CSS中，只需在div中添加和删除类就可以简化这个问题。@sammville Live demo:不，你可以这样做不需要使用jQuery。但是您当前的方法效率很低。如果我们对您的HTML有一个更完整的了解，那么就更容易知道最佳方法。post0x元素是兄弟元素吗？如果是，它们的父容器是否有ID？+1到“patrick dw”…为什么所有的事情都应该用jQuery来完成？jQuery在javascript世界中不是上帝…@WarrenFaith我看到你试图质疑jQuery在javascript世界中作为上帝的角色。@sammville那么，你在使用什么javascript库？我没有使用任何库。我为它编写的javascript代码是above@sammville你不想使用javascript库有什么原因吗？没有！！只是想编码会更简单。有没有关于使用库的建议？为什么所有的事情都应该用jQuery来完成？jQuery不是javascript世界中的上帝…@sammville那么，你在用什么javascript库？我没有为此使用任何库。jav我为它编写的脚本代码是above@sammville你不想使用javascript库有什么原因吗？没有！！只是觉得编码会更简单。有没有关于使用库的建议？为什么所有的事情都应该用jQuery来完成？jQuery在javascript世界里不是上帝…纯JS绝对是解决代码故障的好方法。jQuery只是通过添加50+KB的不需要的代码来加剧问题。纯JS显然更适合于对代码进行故障排除。jQuery只是通过添加50+KB的不需要的代码来加剧问题。
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' : '';
    }
};

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

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