Style.display =デフォルトのdivの「ブロック」はページを開くときに機能しません

Question

これは私の考えです。私はスタジオのウェブサイトをプログラミングしていますが、単なるページです。たとえば、「Reason why」ページなどのボタンをクリックすると、リダイレクトされずにページの内容が変更されます。基本的に、コードは本当に簡単で、このようなもの：

function soloprenota() { 
 
    document.getElementById("article1").style.display = "block"; 
 
    document.getElementById("article2").style.display = "none"; 
 
    document.getElementById("article3").style.display = "none"; 
 
} 
 

 
function soloilnostrosuono() { 
 
    document.getElementById("article1").style.display = "none"; 
 
    document.getElementById("article2").style.display = "block"; 
 
    document.getElementById("article3").style.display = "none"; 
 
} 
 

 
function soloreasonwhy() { 
 
    document.getElementById("article1").style.display = "none"; 
 
    document.getElementById("article2").style.display = "none"; 
 
    document.getElementById("article3").style.display = "block"; 
 
}

機能を使用すると、ナビゲーションバーに関連するボタンをクリックしたときに呼び出され、すべてのものは、それがどうなるかに動作しています。この問題は、fisrtでページが読み込まれてユーザーが期待するアクションがないことに気づいたときに始まりました。そのため、JavaScriptにこれらのdivの1つ「dafault」を設定する方法はありません。私はいくつかの方法で試してみた

、ほとんどのロジックは、このいずれかである可能性があります

if (jQuery.isDefined(soloprenota) || jQuery.isDefined(soloilnostrosuono) jQuery.isDefined(soloreasonwhy)) { 
 
    var examplevar = "examplevaluerlyididntknowwhattomakeitdoesincaseofthis"; 
 
} else { 
 
    document.getElementById("article1").style.display = "block"; 
 
    document.getElementById("article2").style.display = "none"; 
 
    document.getElementById("article3").style.display = "none"; 
 
}

決して変更、最初の負荷のページではまだすべてのdivを示しています。 これを解決するにはどうすればよいですか？ ：/

Answer 1

あなたが望むように、このスクリプトとディスプレイを使用するために、短いコードのためにこれを使用してください。

function soloprenota(e) { 
    var detectid = e; 
    if(detectid=="article1"){ 
    document.getElementById("article1").style.display = "block"; 
    document.getElementById("article2").style.display = "none"; 
    document.getElementById("article3").style.display = "none"; 
    } else if(detectid=="article2"){ 
    document.getElementById("article2").style.display = "block"; 
    document.getElementById("article1").style.display = "none"; 
    document.getElementById("article3").style.display = "none"; 
    } else if(detectid=="article3"){ 
    document.getElementById("article3").style.display = "block"; 
    document.getElementById("article1").style.display = "none"; 
    document.getElementById("article2").style.display = "none"; 
    } 
} 

//Style Sheet 
#article1 { 
    display:none; 
} 
#article2 { 
    display:none; 
} 
#article3 { 
    display:none; 
} 

<nav> 
    <ul> 
    <li onclick="soloprenota('article1')">soloprenota</li> 
    <li onclick="soloilnostrosuono('article2')">soloilnostrosuono</li> 
    <li onclick="soloreasonwhy('article3')">soloprenota</li> 
    </ul> 
    </nav> 
<div id="article1">article 1</div> 
<div id="article2">article 2</div> 
<div id="article3">article 3</div> 

Answer 2

<script>の最後の行にsoloprenota();を追加するだけです。これにより、のsoloprenotaがデフォルトになります。

以下の例を確認してください。

function soloprenota() { 
 
    document.getElementById("article1").style.display = "block"; 
 
    document.getElementById("article2").style.display = "none"; 
 
    document.getElementById("article3").style.display = "none"; 
 
} 
 

 
function soloilnostrosuono() { 
 
    document.getElementById("article1").style.display = "none"; 
 
    document.getElementById("article2").style.display = "block"; 
 
    document.getElementById("article3").style.display = "none"; 
 
} 
 

 
function soloreasonwhy() { 
 
    document.getElementById("article1").style.display = "none"; 
 
    document.getElementById("article2").style.display = "none"; 
 
    document.getElementById("article3").style.display = "block"; 
 
} 
 

 
soloprenota();

<nav> 
 
    <ul> 
 
    <li onclick="soloprenota()">soloprenota</li> 
 
    <li onclick="soloilnostrosuono()">soloilnostrosuono</li> 
 
    <li onclick="soloreasonwhy()">soloprenota</li> 
 
    </ul> 
 
    </nav> 
 
<div id="article1">article 1</div> 
 
<div id="article2">article 2</div> 
 
<div id="article3">article 3</div>

Answer 3

<nav> 
    <ul> 
     <li onclick="soloprenota()">soloprenota</li> 
     <li onclick="soloilnostrosuono()">soloilnostrosuono</li> 
     <li onclick="soloreasonwhy()">soloprenota</li> 
    </ul> 
</nav> 
<div id="article1">article 1</div> 
<div id="article2">article 2</div> 
<div id="article3">article 3</div>