javascript - 从多个按钮显示/隐藏 div 中的多个不同内容

Question

我有 5 个不同的图像应该用作按钮，这些按钮中的每一个都应该触发 div 中的内容。我想在页面加载时在 div 中有一个默认内容，但被按下的任何按钮替换，当我单击另一个按钮时，按下按钮的内容应该被替换。

这就是我现在得到的。

HTML:

 $('.section-link').click(function() {
        var cur = $('.section-link').index($(this));
        $('.section-display').removeClass('active');
        $('.section-display').eq(cur).addClass('active');
      });

.section-display:not(.active) {
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#"><img class="button1 section-link" src="button1.jpg" alt=""></a>
    <a href="#"><img class="button2 section-link" src="button2.jpg" alt=""></a>
    <a href="#"><img class="button3 section-link" src="button3.jpg" alt=""></a>
    <a href="#"><img class="button4 section-link" src="button4.jpg" alt=""></a>
    <a href="#"><img class="button5 section-link" src="button5.jpg" alt=""></a>

    // Default CONTENT when page loaded
    <div class="section-display active">
      <h2 class="title">Default Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>
    <div class="section-display">
      <h2 class="title">First Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>
    <div class="section-display">
      <h2 class="title">Second Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>
    <div class="section-display">
      <h2 class="title">Third Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>
    <div class="section-display">
      <h2 class="title">Fourth Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>
    <div class="section-display">
      <h2 class="title">Fifth Ipsum</h2>
      <h2 class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h2>
    </div>

Answer 1

更新:起初我没有注意到问题上的 JQuery 标记。这是使用它的更新答案。

当您不在任何地方导航时，不要使用超链接。它在语义上是不正确的，并且不必要地扰乱了浏览器历史记录。您可以将图像放在 button 元素内，或者只是将 click 事件处理程序添加到图像本身，这就是我在下面展示的内容。

此外，如果您将内容存储在一个对象数组中，则无需创建 5 个单独的 div 结构，而只需更新一个:

// Put all the images in a JavaScript array
var $imgs = $(".section-link");

// If you store your content in an array of objects, you can do this without creating 
// more than one display div. You'll just get the content from the object in the
// array that has the same index as the image (within a different array)
var data = [
  {
    title: "Default Ipsum 1",
    text: "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  {
    title: "Default Ipsum 2",
    text: "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  {
    title: "Default Ipsum 3",
    text: "3 Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  {
    title: "Default Ipsum 4",
    text: "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  {
    title: "Default Ipsum 5",
    text: "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },  
];

// Get reference to the output area
var $outputDiv = $(".section-display");

// Set a click event handler for each of the images
$imgs.on("click", function(){
  // Find the child elements within the output div that need updating and
  // extract the content from the array of objects that correspond
  // to the index of the image that was clicked.
  $(".title", $outputDiv).text(data[$(this).index()-1].title);
  $(".text", $outputDiv).text(data[$(this).index()-1].text);    
});

/* This is only here to make the images visible since they don't 
   actually have valid src paths right now. */
img {
  display:inline-block;
  width:50px;
  height:50px;
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- See how much simpler the HTML is now? -->
<img class="section-link" src="button1.jpg" alt="">
<img class="section-link" src="button2.jpg" alt="">
<img class="section-link" src="button3.jpg" alt="">
<img class="section-link" src="button4.jpg" alt="">
<img class="section-link" src="button5.jpg" alt="">

<div class="section-display active">
  <h2 class="title">Default Title</h2>
  <h2 class="text">Default Content</h2>
</div>