1

サイトのヘッダーに非表示/表示ボタンを作成しましたが、この「問題」があります。ユーザーが初めてサイトを読み込んだ場合、または更新後に、このボタンを2回クリックして作業する必要があります。しかし、初めてです。その後、正常に動作します！なぜこれが起こっているのか考えていますか？

以下のコメントで実例。前もって感謝します！！！

4

4 に答える 4

3

jsコードは次のとおりです。

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block')
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}

ページを初めてロードするときにsheader_1の値を警告すると、結果は空の文字列になるため、コードは何もしません（elseステートメントにジャンプします）。

それを機能させる1つの方法は次のとおりです。

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
//here we also check if display property is empty
if (sheader_1.style.display == 'block' || sheader_1.style.display == '') 
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}
于 2013-01-07T09:16:20.710 に答える
2 
 function display_header(){
 var sheader_1 = document.getElementById("sheader_a");
 var sheader_2 = document.getElementById("sheader_b");

   if (sheader_1.style.display == 'block' || sheader_1.style.display=='')
      {
         sheader_1.style.display  = 'none';
           sheader_2.style.display  = 'block';
      }
   else  {
     sheader_1.style.display  = 'block'; 
     sheader_2.style.display  = 'none';
        }
     }

ワーキングフィドルデモ

于 2013-01-07T09:21:41.053 に答える
1 
window.getComputedStyle(sheader_1).display

要素の計算されたスタイルを取得する必要があります。if (sheader_1.style.display == 'block')それ以外の場合、表示が空になるため、この条件は機能しません。

Internet Explorerでは、計算されたスタイルの方法は次のとおりelement.currentStyleです。

この場合、jQueryを使用することをお勧めします。

于 2013-01-07T09:16:02.457 に答える
1

ページが読み込まれると、sheader_1の表示はブロックされませんが、空の文字列になります。

したがって、条件を次のように変更できます。

if (sheader_1.style.display != 'none')
于 2013-01-07T09:17:48.160 に答える