0
我有一個圖像映射到頁面底部的3個鏈接。點擊鏈接將相關內容從底部滑入視圖。再次單擊鏈接將使內容消失。基於圖像映射鏈接顯示的不同內容
可以說我點擊了鏈接1,以便內容1可見。如果我然後單擊鏈接2內容二也顯示。 我想要的是,當我點擊鏈接2時,內容1消失並顯示內容2。等等
是否有可能修改我下面的內容來實現這個目標?
下面發佈代碼,並有示例here。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#about-text-link').click(function() {
jQuery('#about-text').slideToggle('slow');
jQuery(this).toggleClass('active');
return false;
});
jQuery('#editions-text-link').click(function() {
jQuery('#editions-text').slideToggle('slow');
jQuery(this).toggleClass('active');
return false;
});
jQuery('#contact-text-link').click(function() {
jQuery('#contact-text').slideToggle('slow');
jQuery(this).toggleClass('active');
return false;
});
});
</script>
<style type="text/css">
.menu {
background-color: #FFFFFF;
display: none;
overflow: hidden;
border: 1px solid #CCCCCC;
}
#bottom-block {
position: absolute;
width: 435px;
left: 50%;
margin-left: -218px;
}
#bottom-block {
bottom: 0;
}
</style>
</head>
<body>
<div id="page">
<div id="bottom-block">
<img src="menu.png" width="435px;" height="34px;" usemap="#map" />
<map id="_map" name="map">
<area shape="rect" coords="11,6,102,29" href="#" alt="about" title="about" id="about-text-link" />
<area shape="rect" coords="109,6,286,29" href="#" alt="editions" title="editions" id="editions-text-link" />
<area shape="rect" coords="295,6,410,29" href="#" alt="contact" title="contact" id="contact-text-link" />
</map>
<div class="menu" id="about-text">
About text
</div>
<div class="menu" id="editions-text">
Editions text
</div>
<div class="menu" id="contact-text">
Contact text
</div>
</div>
</div>
</body>
</html>
工程就像一個魅力!非常感謝。 – 2013-04-26 14:25:49