我想要做的是有一个与DIV盒匹配的链接列表。我希望一次只能显示一个div,并且除了链接菜单外,还要隐藏所有其他div。
我理解如何编写代码淡出div,然后淡入新的,但我不知道如何编写它所以它在所有链接之间是“通用的”。
这有意义吗?
当您第一次进入该页面时,会有一个“启动”页面(id =“splash”)。菜单将浮动,将有4-6个链接。当您点击链接'1'时,它将淡出启动页面,淡入页面'1'。当您单击链接'4'时,它将淡出页面'one'并淡入页'4'。
有人可以帮我写它所以我所要做的就是给链接分配一个类,这是合适的div吗?我是个新手... ...
答案 0 :(得分:2)
带有启动和三页的示例;
<div class="page" id="splash">
splash content
</div>
<div class="page" id="page1" style="display: none;">
page 1 content
</div>
<div class="page" id="page2" style="display: none;">
page 2 content
</div>
<div class="page" id="page3" style="display: none;">
page 3 content
</div>
<a href="#" onclick="switchPage(1); return false;">Page 1</a>
<a href="#" onclick="switchPage(2); return false;">Page 2</a>
<a href="#" onclick="switchPage(3); return false;">Page 3</a>
<script type="text/javascript">
function switchPage(x) {
jQuery(".page").fadeOut(600, function() { jQuery("#page" + x).fadeIn(600); }
}
</script>
答案 1 :(得分:1)
我没有说明这一点,但我认为this就是你想要的。您也可以通过ajax加载页面,但我只是创建了一个具有不同视图的页面。
标记:
<div id="menu">
<ul>
<li><a href="#">Splash</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
<div id="container">
<div id="splash">
Splash
</div>
<div style="display:none;">
Page 1
</div>
<div style="display:none;">
Page 2
</div>
</div>
css
#container > div {
position: absolute;
}
脚本
$(function() {
var divs = $("#container > div");
var links = $("#menu a").click(function(e) {
e.preventDefault();
var pageToShow = divs.eq(links.index(this));
if(!pageToShow.is(":hidden")) {
return;
}
divs.not(':hidden').fadeOut('slow', function() {
pageToShow.fadeIn('slow');
});
});
});