divを非表示にしてJavaScriptなしでチェックする場合

divを隠す実際の機能を除くすべてが機能しています。私がJavaScriptなしでこれを必要とするのは、それが非表示のJavaScript警告であるためです。私はCSSを使ってdivの表示をnoneに設定しようとしていますが、正しく動作していないようです。あなたは間違って~ CSSセレクタを使用しているdivを非表示にしてJavaScriptなしでチェックする場合

HTML

<noscript> 
    <div class="jswarning"> 
     JavaScript is disabled. For the best experience, enable it. 
     <label class="jswarningbutton" for="hidejswarning">Hide</label> 
     <input id="hidejswarning" type="checkbox"> 
    </div> 
</noscript>

CSS

.jswarning { 
    box-sizing: border-box; 
    padding: 5px; 
    background:red; 
    width:100%; 
    color:white; 
    text-align:center; 
} 

.jswarningbutton { 
    background: white; 
    color: red; 
    cursor: pointer; 
} 

.jswarningbutton + input { 
    display: none; 
} 

.jswarningbutton + input[type=checkbox]:checked ~ .jswarning { 
    display: none; 
}

出典

2017-08-19 XantiuM

男、JSを使ってください。他の方法のいずれかでJSメッセージを表示しないでください。これはハックといいです。返信を見て、ボックスがチェックされているかどうかに関わらず "隠す"テキストが残っています。これはちょうど醜いです、ごめんなさい – ptts

。

~セレクタは、p ~ ulとして使用する必要があります。これは、pタグの前にあるulごとにこのCSSを適用することを意味します。セレクタ参照はhereにあります。

出典

2017-08-19 04:58:50

〜CSSセレクタは、一般兄弟セレクタと呼ばれます。前のセレクタの兄弟を選択します。

.jswarning { 
 
box-sizing: border-box; 
 
padding: 5px; 
 
background:red; 
 
width:100%; 
 
color:white; 
 
text-align:center; 
 
} 
 

 
.jswarningbutton { 
 
background: white; 
 
color: red; 
 
cursor: pointer; 
 
} 
 

 
.jswarningbutton + input { 
 
display: none; 
 
} 
 

 
.jswarningbutton + input[type=checkbox]:checked ~ .jswarning{ 
 
display: none; 
 
}

<label class="jswarningbutton" for="hidejswarning">Hide</label> 
 
<input id="hidejswarning" type="checkbox"> 
 
<div class="jswarning"> 
 
    JavaScript is disabled. For the best experience, enable it. 
 
</div>

出典

2017-08-19 05:01:45 Dij

div内にラベル+チェックボックス "ボタン"を隠す必要がありますか？ – XantiuM

cssに親セレクタがありません。あなたはdivの中に入れることができますが、divを選択して非表示にする方法はありません。 – Dij

これは（2017年8月現在）CSSと伝え不可能なので、私はPHPのクッキーでそれを行うことができました。誰もが興味を持っている場合、これは（おそらくより良い方法があります）私が使用したコードです：クッキー（hidejswarningを設定

メインページ（index.phpを）

<?php 
    if(!isset($_COOKIE['hidejswarning'])){ 
     setcookie('hidejswarning', '0', time()+3600, '/'); 
     header('Location: index.php'); 
    } 
?> 

<!DOCTYPE html> 
<html> 
    <body> 
     <?php 
      if ($_COOKIE["hidejswarning"] != '1') { 
       echo " 
     <noscript> 
      <div class='jswarning'> 
       JavaScript is disabled. For the best experience, enable it. <a href='hidejswarning.php'>Hide</a> 
      </div> 
     </noscript> 
       "; 
      } 
     ?> 
    </body> 
</html>

ページ。あなたが隠れているPHP）

<?php 
    setcookie('hidejswarning', '1', time()+3600, '/'); 
    header('Location: index.php'); 
?> 
<html><body>Please wait...</body></html>

出典

2017-08-19 05:38:17 XantiuM

1）のものは、入力の兄弟ではなく、親である必要があります。親セレクタはありません。簡単な修正。

2）htmlの入力タグの後にある必要があります。前の兄弟セレクタはありません。あなたの与えられた外観の難しい修正。あなたはそれの前に表示されるhtmlのチェックボックスの後にあるメッセージを取得するためにいくつかの面倒な配置が必要です。

3）しかし、この相互作用は視覚的にチェックボックスにする必要はありません。チェックボックスの入力タグを非表示にします（表示：なし）。ラベルをクリックすると、チェックボックスの状態が切り替えられます。入力タグの後に、ラベル内のdiv/spanにメッセージを挿入します。これで〜セレクタを使ってメッセージを隠すことができます。たぶん、 "隠す"という言葉のスタイルを変えてしまうかもしれません。

出典

2017-08-19 17:06:38

divを非表示にしてJavaScriptなしでチェックする場合

答えて

関連する問題