Question

所以基本上我有这个下拉菜单，显示了一个选项列表。单击第一个，第二个和第三个选项时，它将重定向到名为products.html的页面，但对于每个选项，页面将显示不同的内容。这是我已经完成的代码：

HTML

<ul class="ul">
  <li><a href="home.html">HOME</a></li>
  <li class="dropdown"> 
  <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">PRODUCT</a>
  <div class="dropdown-content" id="myDropdown">
      <a href="products.html" onclick="computerjs()" type="button">COMPUTER</a>
      <a href="products.html" onclick="laptopjs()" type="button">LAPTOP</a>
      <a href="products.html" onclick="smartphonejs()" type="button">SMARTPHONE</a>
      </div>
  </li>
  <li><a href="about.html">ABOUT US</a></li>
  <li> 
  </li>
</ul>


<div id="content1" style="display: none">
  <font size="16" face="Verdana">Computer</font><br>
  <font face="Verdana" color="gray">Computer technology is constantly changing and top brands are continually launching new computer models. Nano Electronics is here to assist you choose the right computer that best fits your needs and budget.</font>
  <br><br>

  <table width="600 px">
  <tr>
       <td><img src="images/Computer/1.jpg" width="250" height="250" /></td>
       <td width="25 px"></td>
       <td><img src="images/Computer/2.jpg" width="250" height="250" /></td>
  </tr>
  <tr>
       <td align="center"><font face = "Arial" color="gray" size="5">Dell S2317HJ</font></td>
      <td width="25 px"></td>
       <td align="center"><font face = "Arial" color="gray" size="5">HP Pavilion</font></td>
  </tr>
  <tr>
       <td><hr align="left" noshade="noshade" width="250"></td>
       <td width="25 px"></td>
       <td><hr align="left" noshade="noshade" width="250"></td>
  </tr>
  <tr>
       <td><font face = "Verdana" size="5" color="#272727">$ 320.87</font></td>
      <td width="25 px"></td>
       <td><font face = "Verdana" size="5" color="#272727">$ 620.87</font></td>
  </tr>
</table>

</div>


<div id="content2" style="display : none">
This will show when I click Laptop.
</div>

<div id="content3" style="display : none">
This will show when I click Smartphone.
</div>

这是JavaScript：

function computerjs() {
  document.getElementById('content1').style.display = '';
}

function laptopjs() {
document.getElementById('content2').style.display = '';
}

function smartphonejs() {
document.getElementById('content3').style.display = '';
}

使用这些代码，div内容无法保持可见，只会闪烁。谁能帮我这个？非常感谢。

P.S。我不能使用JQuery或JavaScript以外的任何类型的脚本。

Javascript：使用style.display =''显示div，但div内容仅闪烁

0 个答案: