单击链接并隐藏其他链接时如何显示特定的div？
[英]How to show a specific div when a link is clicked and hide others?
问题描述
I want to show only one div when the user clicks the links on the icon bar and hide others. 
当用户单击图标栏上的链接并隐藏其他链接时，我只希望显示一个div。 When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden. 当用户单击图标栏的主页链接时，仅“ hoediv”可见，其他隐藏。 My work is below please help!! 我的工作在下面，请帮忙！！
<!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>
2 个解决方案
解决方案1
2 已采纳
What you need to fix? 您需要解决什么？
- Firstly,
<head></head>only includes metadata, the rest should be in the<body></body>.首先， <head></head>仅包含元数据，其余应位于<body></body>。 - If you're not going to make use
<a>anchor tags for hyperlinking, then pass the valuehref="JavaScript:Void(0);"如果您不打算使用<a>锚标记进行超链接，则传递值href="JavaScript:Void(0);"(The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.（void运算符将计算给定的表达式，然后返回未定义的值）或更好，不要更好地使用定位标记或span或button。 - You didn't import
jquery.jsin your html file.您没有在HTML文件中导入jquery.js。 - You can make this a lot more effecient , but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc. 您可以提高效率 ，但是我建议您从广泛使用的资源中学习一些基本的html，然后从CSS，Jquery等中学习。
Sources to refer: 资料来源：
https://www.w3schools.com/html/html5_intro.asp https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/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>
解决方案2
0 2017-12-21 14:44:36
If you want to simplify it, you can use classes and data attributes to toggle wanted content: 如果要简化它，可以使用类和数据属性来切换所需的内容：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.