hiddenを使って項目の表示、非表示を切り替えたいのですが

質問

素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。
<---A---><--B--><-C-><--D-->といった形で表示されているものを、例えばBとCを非表示にして
<---A---><--D-->のように表示する又はAとCを非表示にして
<--B--><--D-->といった形で表示出来ないでしょうか
<div class="A">A
<div class="B">B
<div class="c">C
<div class="d">D
以下やってみたのですが
<script type="text/javascript">
function hidden_Disp() {
document.getElementById("B").style.visibility = "hidden";
document.getElementById("C").style.visibility = "hidden";
}
</script>
でやってみましたが駄目です。
何卒宜しく御願い致します。

回答No.3

yambejp · ベストアンサー

たとえばこんな感じでどうでしょう？

<style>
.hide{
visibility:hidden;
}
</style>
<script>
function hidden_Disp(a) {
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
var cn=divs[i].className;
cn=cn.replace(/(^|\s)hide(\s|$)/,'');
for(var j in a){
if(cn.match(new RegExp("(^|\s)"+a[j]+"(\s|$)"))){
cn=cn+" hide";
break;
};
}
divs[i].className=cn;
}
}
</script>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div>E</div>
<input type="button" value="Hide A,C" onclick="hidden_Disp(['A','C'])">
<input type="button" value="Hide B,D" onclick="hidden_Disp(['B','D'])">
<input type="button" value="Hide A,B,C" onclick="hidden_Disp(['A','B','C'])">

補足

凄い動きました。厚かましいのですが、Hiddenでは前に詰まらないようです。style="display:none"にする方法をお教え下さるよう御願い致します。
何卒宜しく御願い致します。

回答No.4

yambejp

＞、Hiddenでは前に詰まらないようです。style="display:none"にする方法

意図的に詰まらないようにしているのかと思っていました。
やり方は単純で、
.hide{
visibility:hidden;
}
のところを
.hide{
display:none;
}
とするだけです。スクリプトじたいはいじる必要はありません。

お礼

出来ました。ありがとうございました。

回答No.2

fujillin

div で特定のクラス設定のあるものを非表示にしたいのなら、

function hidden(c) {
var i = 0, e, d = document.getElementsByTagName('DIV');
while(e = d[i++]) if (e.className.match(new RegExp('(^| )' + c + '( |$)'))) e.style.visibility = 'hidden';
}

みたいな感じ？

お礼

ありがとうございました。

回答No.1

notnot

HTMLはいろいろおかしいです。

<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>

でやってください。
JavaScriptはhidden_Disp()をどうやって呼び出すかをさておけば、おかしくないです。

お礼

ありがとうございました。