点击右侧面板li时左侧面板上的jquery显示值

Question

我正在尝试填充左侧面板DIV上右侧面板上的LI点击时隐藏的值。我的格式可能行不通，我不知道。有什么办法可以完成这个任务吗？

<div class="left-main" style="float:left;padding-right:25px;border-right:2px solid black;padding:25px;"> 
<h1>This is Left Filter</h1> 


<div class="left" style="display:none;"> 

    <ul > 
    <li id="one">Content 1</li> 
    <li id="two">Content 2</li> 
    <li id="three">Content 3</li> 
    <li id="four">Content 4</li> 
    <li id="five">Content 5</li> 

    </ul> 
    </div> 
    </div> 


    <div class="right"> 
    <ul> 
     <li class="one">Content 1</a></li> 
     <li class="two">Content 2</a></li> 
     <li class="three">Content 3</li> 
     <li class="four">Content 4</li> 
     <li class="five">Content 5</li> 
    </ul> 

以下是在的jsfiddle http://jsfiddle.net/8Aqvb/3/ 示例任何帮助，将不胜感激。谢谢

Answer 1

下面是一种方法。我只是做了以下内容：

JSFiddle Demonstration

（1）我加cursor:pointer;什么，我会打电话给你的“导航”，所以它看起来像你实际点击和期待事情发生。

.right ul li { 
    display:inline; 
    background:red; 
    color:white; 
    padding:5px; 
    cursor: pointer; 
} 

（2）我改变你的jQuery代码的第一个环节，在我会打电话给你的“内容”的元素来工作，而不是你的内容位于整个分频器。我把一个ID为无序列表的基础是它的目的是用于导航还是显示内容，这也是我如何参考这两个。随意修改id和类名称，但是当您修饰代码时，请保持一致！

$("#content li").hide();

（3）类是内容项之间共享。您可以使用标识符或类 - 您只需要确定它们之间的链接（内容1映射到内容1等）。根据占位符的用途，您可能想要为标识符或类使用任何适当的名称。 （4）隐藏和显示内容很简单 - 一旦有人点击导航中的五个项目之一，我们将隐藏所有内容，就像我们刚刚加载页面一样。这将防止多个内容项目一次出现。我们会在最终用户点击时替换它们。在所有内容都被隐藏之后，或者换句话说，在显示的当前内容项被再次隐藏之后，我们将显示最终用户通过使用类名来点击的内容映射到内容中的右列表项。 （内容1映射到内容1等）

拆分的原因只是为了确保我们获得第一个类名。如果您想要为特定项目添加更多类别，请将该类别保留为首先链接到内容项目。因此，如果您想让内容项目背景为红色，并且您创建并添加了红色课程，则可以执行类似class="one red";和split(" ")[0]的操作，以确保它只获得“1”，这正是我们用来映射到右侧内容项目。

$("#nav li").click(function(e) { 
    $("#content li").hide(); 
    $("#content li." + e.target.className.split(" ")[0]).show(); 
}); 

• 注意：您有一个额外的趴在你的HTML。不知道你的整个html是怎么样的，所以我会把它留给你来打磨代码。让我知道你是否有另一种方法，而不是让id或class来展示和隐藏正确的元素。