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）在内容项之间共享类。您可以使用ID或类 - 您只需要识别每个内容之间的链接（内容1映射到内容1等）。根据占位符的用途，您可能希望对ID或类使用任何适当的名称。

（4）隐藏和显示内容很简单 - 一旦有人点击导航中的五个项目之一，我们就会隐藏所有内容，就像我们刚加载页面一样。这将阻止多个内容项一次出现。我们将在最终用户点击时替换它们。在所有内容再次隐藏之后，或者换句话说，在显示的当前内容项再次隐藏之后，我们将通过使用类名映射到内容中的右侧列表项来显示最终用户刚刚单击的那个。（内容1映射到内容1等）

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

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

注意：你的html中有额外的谎言。不确定你的整个html是怎样的，所以我会留给你来完善代码。如果您有其他方法，请告诉我，而不是让ID或类显示和隐藏正确的元素。

单击右面板li时左侧面板上的Jquery显示值

1 个答案: