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

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

您需要解决什么？

首先， <head></head>仅包含元数据，其余应位于<body></body> 。
如果您不打算使用<a>锚标记进行超链接，则传递值href="JavaScript:Void(0);" （void运算符将计算给定的表达式，然后返回未定义的值）或更好，不要更好地使用定位标记或span或button。
您没有在HTML文件中导入jquery.js 。
您可以提高效率 ，但是我建议您从广泛使用的资源中学习一些基本的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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-header-div"> <a id="home" href="JavaScript:Void(0);"> Home</a> <a id="about" href="JavaScript:Void(0);"> About us</a> </div> <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>

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 个解决方案

解决方案1
2 已采纳

解决方案2
0 2017-12-21 14:44:36

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

问题描述

2 个解决方案

解决方案1 2 已采纳

解决方案2 0 2017-12-21 14:44:36

解决方案1
2 已采纳

解决方案2
0 2017-12-21 14:44:36