Question

现在我的导航标签只能点击。我是通过使用＆＃34; anchor（）标签＆＃34;来完成的。但是一旦我点击它，它就不会显示相应的段落（我已经存储在我的HTML文件中）。基本上我没有添加任何功能，点击选项卡后发生的事情。而且我不知道如何做到这一点以及哪一个更好（与jquery和javascript相比）。

这是我的代码：

.PHP文件：

    <!DOCTYPE html>
<html lang="en">
<head>

<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.14.custom.css">

<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>

</header>
<!--This div wrapps all the tabs and corresponding section/paragraphs-->
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#who_im">WHO I'M</a></li>
<li><a href="#gallery">GALLERY</a></li>
<li><a href="#diary">MY DIARY</a></li>
<li><a href="#blog">FATAH'S BLOG</a></li>
<li><a href="#contact">CONTACT ME</a></li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding 
text and paragraph will be added here-->

<div id="all_contents">

<div id="home_contents">
<p> It's home.</p>
</div>

<div id="who_im_contents">
<p> It's who I'm.</p>
</div>

<div id="gallery_contents">
<p> It's Gallery.</p>
</div>

<div id="diary_contents">
<p> It's diary.</p>
</div>

<div id="blog_contents">
<p> It's my blog.</p>
</div>

<div id="contact_contents">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>

.CSS文件：

*{
margin:0px;
padding:0px;

}
h1{
font:bold 20px Tahoma;

}
h2{
font:bold 14px Tahoma;

}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;

}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{

background:white;
color:black;
border:3px solid red;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{

border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid red;
}

Answer 1

您在[{1}}和href div中的值不同，这就是问题，请将id id与导航相匹配例如：

div

Answer 2

您实际设置的是页内导航栏。如果您更改链接以匹配实际ID，那么当您单击链接时，浏览器将滚动到相关的div。

换句话说，您需要从所有锚中删除_contents或将_contents添加到top_menu中的所有链接，以便发生任何事情。

Answer 3

您可以查看以下适合您的代码

$('ul > li > a').click(function () {
        $('#all_contents >div').hide();
        var $this = $(this);
        var target = $this.attr('href');
        $(target).show();
        return false;
    });

请参阅Demo

为什么我的标签（即主页，关于我......）没有显示相应的段落或部分？

3 个答案: