Jquery 根据列表上的id值显示/隐藏div容器（&A）；div容器

简单的逻辑需要修正

如果li在id上有类名“selected”。。获取该值并与div容器匹配。如果li和div id相同，则显示该div容器并隐藏其他id容器

HTML

<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a></li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a></li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

<ul>
    <li class="slist selected" id="ele1" data-div-link="ele1div"><a href="javascript:;">Element 1</a></li>
    <li class="slist" id="ele2" data-div-link="ele2div"><a href="javascript:;">Element 2</a></li>
</ul>

<div class="cwrapper">
    <div class="contentEle">
        <div class="content ele1div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
        <div class="content ele2div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
    </div>
</div>

---

谢谢

我会使用HTML

数据-*

属性，它们得到了广泛的支持并提供了很大的灵活性

HTML

<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a></li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a></li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

<ul>
    <li class="slist selected" id="ele1" data-div-link="ele1div"><a href="javascript:;">Element 1</a></li>
    <li class="slist" id="ele2" data-div-link="ele2div"><a href="javascript:;">Element 2</a></li>
</ul>

<div class="cwrapper">
    <div class="contentEle">
        <div class="content ele1div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
        <div class="content ele2div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
    </div>
</div>

文件：

---

问题可能是

this.id

并不总是返回正确的值，特别是对于jQuery函数，我建议使用

$（this.attr（'id'）

）

$('.slist').each(function () {
    if($(this).hasClass('selected')) {
       $('.cwrapper .contentEle > div.content').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
    }
    });

---

我稍微修改了你的javascript。 首先，我会隐藏所有

.content

元素

然后，您可以使用您选择的

.selected

类作为选择器，运行该/那些元素并显示关联的

div

试试看这个片段，我想它能实现你想要实现的目标

$（“.content”）.hide（）；
$（'.slist.selected'）。每个（函数（）{
var$filterEle=$（'..+this.id）.fadeIn（1000）；
});







[ele1]Lorem ipsum Door sit amet，奉献精英。我。。。
[ele2]Lorem ipsum Door sit amet，奉献精英。我。。。
this.id
返回得很好。var$sListEle=$（'.sist'）。单击（函数（e）{e.preventDefault（）；var$ele=$（'.+this.id.）.fadeIn（600）；$（'.cwrapper.contentEle>div.content'）。不（$ele.hide（）；$sListEle.removeClass（'selected'）；$（this.addClass（'selected'）；）；单击功能工作正常。。仅在加载时才将其过滤掉此解决方案会隐藏每个选定元素的所有
.content
元素。你的
hide（）
函数应该在你的
每个
Hi。。这里我们动态地生成ID值。下面的代码在单击函数时工作良好。只需要为onload函数计算。var$sListEle=$（'.sist'）。单击（函数（e）{e.preventDefault（）；var$ele=$（'.+this.id.）.fadeIn（600）；$（'.cwraper.contentEle>div.content'）。而不是（$ele.hide（）；$sListEle.removeClass（'selected'）；$（this.addClass（'selected'）；）@venkatesha看一下第二个代码段，您将看到它在单击和加载时工作。