html 上的 toggleMe 问题

toggleMe Issue on html

我需要一些有关 toggleMe 功能的帮助, 在我点击按钮 2 之后,另一个打开隐藏 不一一全部打开 , *对不起我的英语不好*

我的 js

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>

我的 html

<div>
<input class="styled-button-2" onclick="toggleMe('1')" type="button" value="Text 1" />
<input class="styled-button-2" onclick="toggleMe('2')" type="button" value="Text 2" />
<input class="styled-button-2" onclick="toggleMe('3')" type="button" value="Text 3" />
<input class="styled-button-2" onclick="toggleMe('4')" type="button" value="Text 4" />
</div>

<div id="1" style="display: block;">
111111111111
</div>
<div id="2" style="display: none;">
22222222222222
</div>
<div id="3" style="display: none;">
3333333333333
</div>
<div id="4" style="display: none;">
444444444444
</div>

我没听懂,sorry...这就是你想要的吗? http://jsfiddle.net/030faz4L/

Javascript:

var actual_div = 1;

function toggleMe(a){

    // hide the other div
    document.getElementById('div_'+actual_div).style.display = 'none';

    var e=document.getElementById('div_'+a);
    if(!e) return false;
    if(e.style.display=="none"){
        e.style.display="block"
    } else {
        e.style.display="none"
    }

    actual_div = a;

    return true;
}

HTML:

<div>
<input class="styled-button-2" onclick="toggleMe('1')" type="button" value="Text 1" />
<input class="styled-button-2" onclick="toggleMe('2')" type="button" value="Text 2" />
<input class="styled-button-2" onclick="toggleMe('3')" type="button" value="Text 3" />
<input class="styled-button-2" onclick="toggleMe('4')" type="button" value="Text 4" />
</div>

<div id="div_1"  style="display: block;">
111111111111
</div>
<div id="div_2" style="display: none;">
22222222222222
</div>
<div id="div_3" style="display: none;">
3333333333333
</div>
<div id="div_4" style="display: none;">
444444444444
</div>