Question

当用户点击图标栏上的链接并隐藏其他链接时，我想只显示一个div。当用户点击图标栏的主页链接时，只有“hoediv”可见，其他人则隐藏。我的工作如下，请帮助!!

<!doctype HTML>

<head>

<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>

<body>
<script>
$(function(){
$("#home").click(function(){
    $("#homediv").show();
$("#aboutus").hide();
return false;
});

});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;         
width:100%;font-size:150%; display:none;">This is my site.  
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>

</body>
</html>

Answer 1

您需要修复什么？

首先，<?php ini_set ('error_reporting', E_ALL); ini_set ('display_errors', '1'); error_reporting (E_ALL|E_STRICT); $connection = mysqli_init(); mysqli_options ($connection, MYSQLI_CLIENT_SSL_VERIFY_SERVER_CERT, true); mysqli_ssl_set($connection, '/usr/local/certs/client-key.pem', '/usr/local/certs/client-cert.pem', '/usr/local/certs/server-ca.pem', NULL, NULL); $link = mysqli_real_connect ($connection, $db['host'], $db['user'],$db['password'], $db['dbName'], 3306, NULL, MYSQLI_CLIENT_SSL_DONT_VERIFY_SERVER_CERT); if (!$link) { $this->output->writeln('Connect error (' . mysqli_connect_errno() . '): ' . mysqli_connect_error() . "\n" ); } else { $this->output->writeln($link); // this returns '1' $response = $connection->query('SHOW TABLES;'); while ( $row = $response->fetch_array(MYSQLI_NUM)) { $this->output->writeln($row[0]); } $connection->close(); }仅包含元数据，其余内容应位于<head></head>。
如果您不打算使用<body></body>锚标记进行超链接，则传递值<a> （void运算符计算给定的表达式，然后返回undefined）或者更好的是，不要更好地使用锚标签或跨度或按钮。
您没有在html文件中导入href="JavaScript:Void(0);"。
你可以使这个更有效，但我建议你从广泛可用的资源中学习一些基本的html，然后是CSS，Jquery等。

要参考的来源：

https://www.w3schools.com/html/html5_intro.asp

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/jquery/default.asp

jquery.js

$(function() {
  $("#home").click(function() {
    $("#homediv").show();
    $("#aboutus").hide();
  });
  $("#about").click(function() {
    $("#homediv").hide();
    $("#aboutus").show();
  });

});

Answer 2

如果要简化它，可以使用类和数据属性来切换想要的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-header-div">
  <a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
  <a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>

<div class="content" id="homediv" style="color:white; background-color:red;height:89px;         
width:100%;font-size:150%; display:none;">
  This is my site.  
</div>
<div class="content" id="aboutus" style="display:none;">
  this is about us page
</div>

<script>
$(document).ready(function() {

  $(".header-link").click(function(){
      $(".content").hide();
      $("#" + $(this).attr("data-toggle")).show();
  });
  
});
</script>

单击链接并隐藏其他链接时如何显示特定div？

2 个答案: