Javascriptを利用しています - 要素のスタイルを変更する

ブール値に基づいて、サイドバーの特定のタブを表示してページの読み込み時に非表示にします。Javascriptを利用しています - 要素のスタイルを変更する

var someVar = true; 
 

 
function show_ifTrue() { 
 
    if (Boolean(someVar) == true) { 
 
     document.getElementById('x').style.display = 'block'; 
 
     console.log("I CHANGED IT"); 
 
    } 
 
    else { 
 
     document.getElementById('x').style.background = 'red'; 
 
    } 
 
}

.sidebar { 
 
    position: fixed; 
 
    overflow-y: scroll; 
 
    top: 0; 
 
    bottom: 0; 
 
    float: left; 
 
    display: inline-block; 
 
    z-index: 50; 
 
} 
 
#tab { 
 
    display: block; 
 
} 
 
#x { 
 
    display: none; 
 
}

<div class="sidebar"> 
 
    <a href="#" id="tab"> Cats </a> 
 
    <a href="#" id="x" onpageshow="show_ifTrue();"> Dogs</a> 
 
</div>

私はちょうどできない、style.cssTextを使用したり、属性を設定するJSに変え、!importantを使用して、.sidebar a{...}からディスプレイを取り出し、それぞれのタブに独自の表示プロパティを与えることから、すべてを試してみました表示を変更する。

出典

2016-06-16 Toni Au

'onpageshow'イベントはどこから来ますか？ jQueryモバイルなどを使用していますか？ – adeneo

@adeneo http://www.w3schools.com/tags/ev_onpageshow.asp – Midas

onpageshowは "body"要素でのみ使用できます。 –

色を変更するには、まずonpageshowを<body>に追加する必要がありますので、最初にこの関数を呼び出す必要があります。<body onpageshow='...'>。それとも、あなたはまだだけdiv要素自体に対処したい場合は、オンロード、それを実行します。

window.onload=function(){ 
    show_ifTrue(); 
}

をこの方法では、あまりにも、あなたのpageshowのを使用することができます。

window.onpageshow=function(){ 
    show_ifTrue(); 
}

また、あなたはブール接頭辞を必要としませんあなたの関数では、ちょうどsomeVar == trueです。

出典

2016-06-16 16:02:23 nicael

これは、インタラクティブなオーバーレイメニューが何かを変更するかどうかわかりませんが、私はサイドバーdiv内の関数を呼び出そうとしてもまだ動作しません。私は実際に色の変更を望んでいない、私はその機能が最初に実行された指標としてそこに置く。 –

@トーニそれを残念にして、答えを更新しました。 – nicael

ありがとう！何らかの理由で、window.onpageshowだけが動作します（おそらく、.onload呼び出しによってコンテンツが読み込まれませんでしたか？わかりません）。 –

#tab（編集：OPはこれを編集しましたが、問題の一部でもある可能性があります）のCSS終了用ブラケットがありません。また、body要素にwindow.onloadまたはonpageshowを使用することもできます。これは、動作する唯一の要素です。それは固定で、ここで働い例です：

window.onload = function() { 
 
    show_ifTrue(); 
 
} 
 

 
var someVar = true; 
 

 
function show_ifTrue() { 
 
    if (someVar === true) { 
 
     document.getElementById('x').style.display = 'block'; 
 
     console.log('I CHANGED IT'); 
 
    } 
 
    else { 
 
     document.getElementById('x').style.background = 'red'; 
 
    } 
 
}

.sidebar { 
 
    position: fixed; 
 
    overflow-y: scroll; 
 
    top: 0; 
 
    bottom: 0; 
 
    float: left; 
 
    display: inline-block; 
 
    z-index: 50; 
 
} 
 

 
#tab { 
 
    display: block; 
 
} 
 

 
#x { 
 
    display: none; 
 
}

<div class="sidebar"> 
 
    <a href="#" id="tab"> Cats </a> 
 
    <a href="#" id="x"> Dogs</a> 
 
</div>

私はそれが役に立てば幸い！

出典

2016-06-16 16:10:23

Javascriptを利用しています - 要素のスタイルを変更する

答えて

関連する問題