素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。
<---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ベストアンサー
- 回答日時:
たとえばこんな感じでどうでしょう?
<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
- 回答日時:
>、Hiddenでは前に詰まらないようです。
style="display:none"にする方法意図的に詰まらないようにしているのかと思っていました。
やり方は単純で、
.hide{
visibility:hidden;
}
のところを
.hide{
display:none;
}
とするだけです。スクリプトじたいはいじる必要はありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
innerHTMLに入れたリンクが反応...
-
jQueryを使ってランダムに表示
-
removeEventListenerについて
-
変数名をどのようにつけるのが...
-
HTMLタグに複数のクラスを設定...
-
マウスを乗せるとメニュー表示
-
console.log結果をhtmlで表示し...
-
背景色を透明化
-
【HTML5】【canvas】【js】...
-
javascriptテキストBOX色を元に...
-
hiddenを使って項目の表示、非...
-
iframe内のリンクが飛ばないの...
-
タブで開いてさらにタブ内をア...
-
サイトにコンテンツを並べる際...
-
jspでcssが読み込めない
-
JavaScriptでボタンをクリック...
-
曜日と時間を指定して表示画像...
-
JavaScriptで変更した属性の元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
クリックで色変更後に既に変更...
-
複数のリンク画像を一定時間で...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
[急ぎ] videoタグで埋め込んだm...
-
VBScriptでXMLのデータを取得す...
おすすめ情報