Question

我想让这些项目像这样切换..但是有一个问题。我可以点击所有项目，它们都显示出来。我希望按钮打开相应的容器，但一次只显示一个，而不是点击每个容器，他们只是显示..任何想法？

<script>
$("#infotab_one").click(function() {
    $("#infotab_one_s").slideToggle("slow", "linear");
});

$("#infotab_two").click(function () {
    $("#infotab_two_s").slideToggle("slow", "linear");
});

$("#infotab_three").click(function () {
    $("#infotab_three_s").slideToggle("slow", "linear");
});

$("#infotab_four").click(function () {
    $("#infotab_four_s").slideToggle("slow", "linear");
});

$("#infotab_five").click(function () {
    $("#infotab_five_s").slideToggle("slow", "linear");
});

我想要一个选项，在项目切换时为标记为“infotab_one”的框以及其他（不是_s）颜色添加颜色。谢谢！

Answer 1

var slideAllUp = function(){
    $("#infotab_one_s").slideUp("slow");
    $("#infotab_two_s").slideUp("slow");
    $("#infotab_three_s").slideUp("slow");
    $("#infotab_four_s").slideUp("slow");
    $("#infotab_five_s").slideUp("slow");
};

$("#infotab_one").click(function() {
    slideAllUp();
    $("#infotab_one_s").slideToggle("slow", "linear");
});

$("#infotab_two").click(function () {
    slideAllUp();
    $("#infotab_two_s").slideToggle("slow", "linear");
});

$("#infotab_three").click(function () {
    slideAllUp();
    $("#infotab_three_s").slideToggle("slow", "linear");
});

$("#infotab_four").click(function () {
    slideAllUp();
    $("#infotab_four_s").slideToggle("slow", "linear");
});

$("#infotab_five").click(function () {
    slideAllUp();
    $("#infotab_five_s").slideToggle("slow", "linear");
});

我不喜欢这个解决方案，原因如下：

代码太多了。尝试使用尽可能少的代码通常是一个好主意，这可以通过使用类来缩短。这样，你可以做有趣的事情，如：

$(".tab").click(function(){
    $(".desc").slideUp("slow");
    $(".desc[id='"+$(this).attr("desc_id")+"']").slideDown("slow");
});

切换多个项目

1 个答案: