jQuery 的一些新功能...我正在设置一个投资组合页面。我有一个主 div,显示元素的图像和描述,然后是所有元素的缩略图文本(简短标题)列表。这就是我想要做的:
当点击一个特定的缩略图文本时,主div淡出当前可见的元素并淡入对应于缩略图的元素。使用 href 将目标内容加载到主显示器的最佳方式是什么?
似乎找不到能让我轻松做到这一点的插件。一直在尝试使用 http://perishablepress.com/slide-fade-content 中的一些 javascript .
<!--MAIN DISPLAY-->
<div id="main">
<div id="projectA">
<img src="projectA-image.png" />
<div id="projectA">Description of Project A...</div>
</div>
<!--THUMBNAILS-->
<div class="thumb">
<a href="#projectA" class="thumb-text">PROJECT A</a>
</div>
<div class="thumb">
<a href="#projectB" class="thumb-text">PROJECT B</a>
</div>
这是我对 javascript 的了解:
$('div.thumb-text').click(function () {
var href = $(this).attr('href');
$('div#piece-content').fadeOut("slow", function(){
$('div#piece-content').load('portfolio.html#' +href);
});
});
最佳答案
我在这里看到了一些问题。首先,你的选择器是错误的。 div.thumb-text
将选择所有具有 thumb-text
类的 div
。这些你都没有。这应该是 div .thumb-text
以查找 div
中具有 thumb-text
或 a 类的所有元素。 thumb-text
获取所有 a
类为 thumb-text
的标签。
第二,$('div#piece-content').load('portfolio.html#' +href);
你最终会得到两个 #
在这种情况下,因为 href
已经有了一个。而且我不确定你的意图是什么,但是 #
不用于将东西传递到后端,你可能打算使用 ?
,不完全确定你是什么要去这里。
最后,你永远不会淡入淡出元素。所以在你的 .load
中你需要一个回调:
$('div#piece-content').load('portfolio.html#' +href, function(){
$(this).fadeIn();
});
关于javascript - 如何使用 jQuery 淡出主 div 并淡入相应单击缩略图的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6405046/