在页面上使用相同类别的隐藏divs之间切换会影响所有div

我的页面上有2个div，并带有个人ID。在这些div的我有一个共享相同类的无序列表（.stats-NAV）：在页面上使用相同类别的隐藏divs之间切换会影响所有div

<div id="product1"> 
<ul class="stats-nav"> 
    <li class="stat-cat1"><a href="">Ingredients</a></li> 
    <li class="stat-cat2"><a href="">Nutrition Info</a></li> 
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li> 
</ul> 
</div><!--end product1--> 

<div id="product2"> 
<ul class="stats-nav"> 
    <li class="stat-cat1"><a href="">Ingredients</a></li> 
    <li class="stat-cat2"><a href="">Nutrition Info</a></li> 
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li> 
</ul> 
</div><!--end product2-->

的div的只有1是一次展示;另一个隐藏（显示/隐藏）。列表项目也是如此：一次只显示一个。默认状态是“配料”。

我使用jQuery的实时绑定它：

$("li.stat-cat1 a").live('click', function() { 
$(".nutritional-info").show(); 
return false; 
});

我遇到的问题是，如果我在看＃产品2，点击说“营养信息”，然后单击到＃产品1 ，它会显示＃product1的正确信息，但它将从我在“营养信息”中停止的地方开始，而不是默认状态“成分”。

有没有办法让我“清除”div的最后一个状态？

（如果我通过ajax .load加载内容，按照预期刷新内容，但不再希望使用ajax方法）。

谢谢！

来源

2011-04-19 Yahreen

我们可以看到更多的HTML和js吗？现在我会说，无论何时你处理“点击到＃product1”，只需.hide（）所有div你不想显示和.show（）的成分之一。 – DarthJDG 2011-04-19 21:08:41

我不知道我是否理解正确，但它看起来像你正在应用你的事件'li.stat-cat1'。这听起来像你需要隔离每个。或者您需要参考与点击相关的单个链接。我没有看到任何叫做'营养信息'的课程，所以我猜测它是一个ul的孩子。

$("li.stat-cat1 a").live('click', function() { 
    $(".nutritional-info").hide();//hide all 
    $(this).closest('stats-nav').find(".nutritional-info").show(); 
});

编辑：进一步的思考之后，你可能只需要一个新的类添加到您的点击事件。

$("li.stat-cat1 a").live('click', function() { 
    $(".nutritional-info").show(); 
    $(".nutritional-info").addClass('selected') 
    return false; 
});

然后你可以稍后找到它：

$(".nutritional-info.selected")

来源

2011-04-19 21:09:57 ChrisThompson

我觉得你的问题是，您的选择$（“营养-信息。”）是找到网页上的所有元素，无论是否他们的父div是可见或不可见的。要过滤只作用于可见产品的动作，请尝试如下所示：

$("li.stat-cat1 a").live('click', function() { 
    $("div:visible .nutritional-info").show(); 
    return false; 
});

来源

2011-04-19 21:54:27

在页面上使用相同类别的隐藏divs之间切换会影响所有div

回答

相关问题