javascript - 单击右侧面板 li 时，Jquery 在左侧面板上显示值

Question

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

 <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 和 class 名称，但是当您润色代码时，请保持一致!

$("#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 或类来显示和隐藏正确的元素，请告诉我。