jQuery切换顺序

我试图切换一些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>

---

我建议在这里对方法进行彻底的更改，在没有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>

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

。这样做的目的是使用

href=“#geo”

作为

$（“#geo”）

选择器来切换正确的元素。

class=“content”

是这样的，我们可以将它们全部隐藏起来……您还可以使用同一个类作为一种机制，一次只显示一个（通过隐藏其他内容元素

---

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

你好，尼克，非常感谢你的回答！我真的很感激。我在回到这里之前解决了这个问题，看看是否收到了答案。我会看一看早上第一件事就是看看你的解决方案。再次感谢！

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