Question

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

这就是我现在所拥有的。

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

UPDATE ：我最初没有注意到问题上的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>

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

1 个答案: