Style.display="block" 只为默认 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";
}

当您点击导航栏上的相关按钮时调用函数，并且一切正常。问题开始于我意识到，首先，当页面加载时，用户没有给出预期的操作，所以似乎没有办法告诉 JavaScript 设置其中一个 div "the 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

只需添加 soloprenota(); 作为 <script> 的最后一行。这将使 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 2

<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

使用此短代码来使用此脚本并根据需要显示。

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>

Style.display="block" 只为默认 div 在页面打开时不起作用

Style.display="block" only for the default div doesn't work at the opening of the page

javascript

jquery

html

css

display