Question

我正在尝试切换一些div，同时在链接上设置“活动”状态。以下是我的代码。

$(".product_buy").hide();
$(".product_geo").hide();

$("a.buy, a.geo").click(function()
    {
        $("#" + this.className + "_" + this.rel).slideToggle("fast");
        $(this).toggleClass("item_active");

        if (this.className == "geo")
            {
                $("#info_" + this.rel).slideToggle("fast");
            }

        return false;
    });


<ul class="title_menu">
    <li class="item"><a href="javascript:void(0);" class="geo" rel="blabla" title="Toggle geometry">Geometry</a></li>
    <li class="item"><a href="javascript:void(0);" class="buy" rel="blabla" title="Toggle purchase options">Buy</a></li>
</ul>

<div class="product_buy" id="buy_blabla">
    <div class="block">
        <p>Buy bla bla</p>
    </div>
</div>

<div class="product_geo" id="geo_blabla">
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/>
</div>

<div class="prod_info" id="info_blabla">
    <p>Info bla bla</p>
</div>

它同时切换，但不是全部。如果同时显示两个div“buy”和“geo”，这是好的，但是链接的“活动”状态似乎搞得一团糟。

我是一个菜鸟，所以随意嘲笑我。

编辑：在我看到尼克的回答之前解决了这个问题，所以他的解决方案可能更好。

    $(".product_buy").hide();
    $(".product_geo").hide();

    $("a.buy, a.geo").click(function()
        {
            var itemType = $(this).attr("rev");
            var itemName = $(this).attr("rel");

            $("#" + itemType + "_" + itemName).slideToggle("fast");
            $(this).toggleClass("item_active");

            if (itemType == "geo")
                {
                    $("#info_" + itemName).slideToggle("fast");
                }

            return false;
        });

Answer 1

我将在这里建议彻底改变方法，即使没有JavaScript，也会优雅地降级。使用href转到所需ID的元素，如下所示：

<ul class="title_menu">
  <li class="item"><a href="#geo" title="Toggle geometry">Geometry</a></li>
  <li class="item"><a href="#buy" title="Toggle purchase options">Buy</a></li>
</ul>

<div id="buy" class="content">
  <div class="block">
    <p>Buy bla bla</p>
  </div>
</div>

<div id="geo" class="content">
  <div>
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/>
  </div>

  <div class="prod_info">
    <p>Info bla bla</p>
  </div>
</div>

然后你的jQuery也会让更多更简单，就像这样：

$(".content").hide();
$("ul.title_menu a").click(function(e) {
    $(this.hash).slideToggle("fast");
    $(this).toggleClass("item_active");
    e.preventDefault();
});

You can test it out here。这样做是使用href="#geo"作为$("#geo")选择器来切换正确的元素。 class="content"是我们可以隐藏所有内容的......你也可以使用同一个类作为一次只显示一个的机制（隐藏其他内容元素，{{3 }}

这里的另一大好处是没有启用JavaScript，所有div都会显示，链接将滚动到相应的元素...一个漂亮的降级视图仍然适用于用户。

jQuery切换顺序

1 个答案: