动态显示/隐藏div与jQuery
问题描述:
我目前有jquery Cycle在页面上运行,但不仅发现它笨重,但它与我的其余页面搞乱。我正在编写一个简单的脚本,使其对于我的目的而言已经过时,它将采用单击菜单项的href,显示与之相关的div,同时隐藏所有其他脚本。动态显示/隐藏div与jQuery
的jsfiddle:http://jsfiddle.net/THuST/
HTML(忽略,我用<ul>
只是一个<li>
元素的事实 - 有堆更多的是将去那里,但为了简单起见,我省略了它们)
<div id="adSlideshow">
<div class="adSlideBox current" id="red">
<ul class="gallery" id="redGallery">
<li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="yellow">
<ul class="gallery" id="yellowGallery">
<li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="blue">
<ul class="gallery" id="blueGallery">
<li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
</ul>
</div>
</div>
<ul id="menu" style="list-style:none">
<li><a href="#asics">RED</a></li>
<span>\</span>
<li><a href="#plants">YELLOW</a></li>
<span>\</span>
<li><a href="#tooheys">BLUE</a></li>
</ul>
CSS
.adSlideBox {display:none;}
.adSlideBox.current {display:block;}
img {max-width:350px; max-height:350px}
#menu li {float:left; margin-left:2em}
jQuery的
$("#menu a").click(function() {
var link = $(this).attr('href');
var showIt = $(".adslidebox a[href=" + link + "]");
var hideIt = $(".adSlideBox.current");
hideIt.fadeOut(100, function(){
hideIt.removeClass("current");
showIt.addClass("current");
showIt.fadeIn(100);
});
});
这是我第一次尝试从头开始制作一个脚本,所以请多多包涵。我想我是相对关闭; .current div
成功淡出,但所选div不会淡入,.current
类不会切换。
答
只是轻微改变你HTML和JavaScript应该解决这个问题。
基本上,我做你的div的ID的匹配您的href值。这样你只需要从你的链接中提取href值并将其作为有效的选择器传递给jQuery。
的JavaScript
$("#menu a").click(function() {
var link = $(this).attr('href');
var showIt = $(link);
var hideIt = $(".adSlideBox.current");
hideIt.fadeOut(100, function(){
hideIt.removeClass("current");
showIt.addClass("current");
showIt.fadeIn(100);
});
});
HTML
<div id="adSlideshow"><!-- DIV FOR THE AD BLOCK -->
<div class="adSlideBox current" id="asics">
<ul class="gallery" id="redGallery">
<li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="plants">
<ul class="gallery" id="yellowGallery">
<li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="tooheys">
<ul class="gallery" id="blueGallery">
<li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
</ul>
</div>
</div>
<ul id="menu" style="list-style:none">
<li><a href="#asics">RED</a></li>
<span>\</span>
<li><a href="#plants">YELLOW</a></li>
<span>\</span>
<li><a href="#tooheys">BLUE</a></li>
</ul>
答
你里面有没有.adslidebox链接,这是#menu元素
UPDATE: HTML:
<div id="adSlideshow">
<div class="adSlideBox current" id="asics">
<ul class="gallery" id="redGallery">
<li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="plants">
<ul class="gallery" id="yellowGallery">
<li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
</ul>
</div>
<div class="adSlideBox" id="tooheys">
<ul class="gallery" id="blueGallery">
<li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
</ul>
</div>
</div>
<ul id="menu" style="list-style:none">
<li><a href="#asics">RED</a> <span>\</span></li>
<li><a href="#plants">YELLOW</a> <span>\</span></li>
<li><a href="#tooheys">BLUE</a></li>
</ul>
JS:
$("#menu a").click(function() {
var link = $(this).attr('href');
var showIt = $(".adSlideBox" + link);
var hideIt = $(".adSlideBox.current");
hideIt.fadeOut(100, function(){
hideIt.removeClass("current");
showIt.addClass("current");
showIt.fadeIn(100);
});
});
难道你不知道,当我编辑的代码来适应的jsfiddle我忘了改在href =“#xyz”的菜单项为红色/黄色/蓝色。可能使它变得更加困难!干杯,我的var showIt代码解决了这个问题。 – Jascination 2012-01-10 01:41:22
太棒了,很高兴我能帮上忙! – 2012-01-10 01:44:35