创建一个锚点，在您单击时更改内容

Question

我有内容（包含信息）和链接，如何在点击上面的链接时更改内容？几乎像滑块，但简单...... 有人能告诉我一个例子吗？

Answer 1

您需要做的是在点击链接时显示/隐藏您的内容。

查看以下示例：

＆＃13;

＆＃13;

$(function() {
  $("#one").show();
  $(".tile").click(function() {
    $(".tile").removeClass("selected");
    $(".content").slideUp(500);
    $("#" + $(this).data("link")).slideToggle(500);
    $(this).toggleClass("selected");
  });
});

＆＃13;

.tile {
  padding: 10px;
  border: 2px blue solid;
  display: inline-block;
}
.content {
  display: none;
  border: 2px green solid;
  padding: 30px;
  width: 110px;
}
.selected {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tile selected" data-link="one">One</div>
<div class="tile" data-link="two">Two</div>
<div class="tile" data-link="three">Three</div>
<hr/>
<div class="content" id="one">Content for #One Tile</div>
<div class="content" id="two">Content for #Two Tile</div>
<div class="content" id="three">Content for #Three Tile</div>

＆＃13;

＆＃13;

＆＃13;

由于您是jQuery的新手，请阅读以下内容以了解上述示例中发生的情况：

1. https://api.jquery.com/click/
2. https://api.jquery.com/slideup/
3. https://api.jquery.com/slidetoggle/
4. https://api.jquery.com/data/

Answer 2

您可以尝试这样的事情

＆＃13;

＆＃13;

$(".link_slide").click(function(){
  $(".content_slide").hide(500);
  $("#div"+$(this).attr("id")).show(500);
 });

＆＃13;

.content_slide{
  display:none;
  }

＆＃13;

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

<a class="link_slide" href="#" id="one">One</a>
<a class="link_slide" href="#" id="two">Two</a>

<div class="content_slide" id="divone">First content</div>
<div class="content_slide" id="divtwo">Second content</div>

＆＃13;

＆＃13;

＆＃13;