0

单击文本菜单时，照片淡入和标题也会淡入放置在单独的位置。我无法整合标题。如果有更好的方法可以做到这一点，我将不胜感激。

演示：http: //jsfiddle.net/Tacbs/4/

$(document).ready(function() {
$("div#photos, div#photo-titles").hide();
var divs = $("#Photo1, Photo1-Title, #Photo2,  Photo2-Title, #Photo3, Photo3-Title,");
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).fadeIn();
});
});​

#photo-titles {
margin-top: 0;
}
#photos {
margin-top: 100px;
}
#photo-titles {
margin-top: 200px;
}​

<div id="photo-links">
<ul>
<li><a href="#" class="Photo1 Photo1-Title">Photo 1 Button</a></li>
<li><a href="#" class="Photo2 Photo2-Title">Photo 2 Button</a></li>
<li><a href="#" class="Photo3 Photo3-Title">Photo 2 Button</a></li>
</ul>
</div>

<div id="photos">
<div id="Photo1"><img src="Photo1.jpg"/></div>
<div id="Photo2"><img src="Photo1.jpg"/></div>
<div id="Photo3"><img src="Photo1.jpg"/></div>
</div>

<div id="photo-titles"> // text
<div id="Photo1-Title">Photo Title 1</div>
<div id="Photo2-Title">Photo Title 2</div>
<div id="Photo3-Title">Photo Title 3</div>
</div>​
4

2 回答 2

1

您缺少很多逻辑，缺少#ID 选择器，而且您正在抓取您想要显示的 div，.attr('class')但没有将它们按空格拆分并选择它们。

http://jsfiddle.net/6krwX/

$("div#photos, div#photo-titles").hide();

// you were missing # ID selector for some selectors here
var divs = $("#Photo1, #Photo1-Title, #Photo2,  #Photo2-Title, #Photo3, #Photo3-Title");

$("li a").click(function () {

    $(divs).hide();
    $('#photos, div#photo-titles').show(); // show the areas

    var locations = $(this).attr('class').split(' '); // split the classes up

    for (i = 0; i < locations.length; i++) {
        $("#" + locations[i]).show(); // show photo & title
    }
});

可以进行任何改进，但是 jist 就在那里并且它正在工作！

于 2012-11-27T17:53:39.427 回答
1

有几件事，我认为你使用了太多的 id。使用类可以更好地控制这一点。如果您尝试一次做多件事，这就是存在类的原因（有点）。使用 id，您必须隔离每一个。所以我将一些 id 更改为 classes 并让它运行良好。

HTML

<div id="photo-links">
<ul>
<li><a href="#" class="Photo1">Photo 1 Button</a></li>
<li><a href="#" class="Photo2">Photo 2 Button</a></li>
<li><a href="#" class="Photo3">Photo 3 Button</a></li>
</ul>
</div>

<div id="photos">
<div class="Photo1 hide"><img src="Photo1.jpg"/></div>
<div class="Photo2 hide"><img src="Photo1.jpg"/></div>
<div class="Photo3 hide"><img src="Photo1.jpg"/></div>
</div>

<div id="photo-titles">
<div class="Photo1 hide">Photo Title 1</div>
<div class="Photo2 hide">Photo Title 2</div>
<div class="Photo3 hide">Photo Title 3</div>
</div>​

JS $(文档).ready(函数() {

$("#photos, #photo-titles, .hide").hide();


$("li a").click(function () {
    $("#photos, #photo-titles, .hide").hide(); // Hide everything every time
    var c = $(this).attr('class').split(' ')[0]; // Get first class of link
    $("." + c).parent().show(); // Show the parent div
    $("." + c).fadeIn(); // Show the object you want to show
    });
});​

可能有一种更有效的方法可以做到这一点，但效果很好。

更新 我意识到我创建了那个隐藏类并且没有解释它。首先，这取决于您是否要隐藏父 div#photos和#photo-titles. 这将取决于您使用它们的目的。如果您不需要隐藏这些 div 本身以及其中的所有内容，则可以#photos, #photo-titles从hide()调用中删除 以及该行$("." + c).parent().show();，因为始终会显示父母。然后你可以隐藏.hide类。

于 2012-11-27T18:09:42.853 回答