很抱歉提出一个非常基本的问题,我对jQuery很新。我有一段HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Div</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<nav>
<div id='menu'>
<img src='img/Navigation/home.png' title='Home' alt='' />
<img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' />
<img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' />
<img src='img/Navigation/facebook.png' title='Follow us' alt='' />
<img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /> </div>
</nav>
<div style="clear:both"></div>
<div id="contactUs" style="height:300px; width:300px; background-color:#999; display:none;">Contact Us</div>
<div id="portfolio" style="height:300px; width:300px; background-color:#999; display:none;">Portfolio</div>
<div id="aboutUs" style="height:300px; width:300px; background-color:#999; display:none;">About Us</div>
</body>
</html>
我想在点击相应按钮时显示contactUs,portfolio和aboutUs Divs。
我搜索了大量的在线示例仍然无法使其工作。
$("#content > div").hide();
$("#menu a").click(function(){
$("div#" + $(this).attr("id")).show();
});
你有一个问题,使用相同的id
为您的img
标签和您的div
标签
尝试这样的事情:
<body>
<nav>
<div id='menu'>
<a><img src='img/Navigation/home.png' title='Home' alt='' />
<a href="#contactUs"><img /></a>
<a href="#portfolio"><img /></a>
</div>
</nav>
<div style="clear:both"></div>
<div id="content">
<div id="contactUs">Contact Us</div>
<div id="portfolio">Portfolio</div>
<div id="aboutUs">About Us</div>
</div>
</body>
$("#content > div").hide();
$("#menu a[href]").click(function(){
$("#content " + $(this).attr("href")).show().siblings().hide();
});