更改单击时显示的单元格内容 - javascript

Question

它是否存在一个库或一些函数集，它们执行以下_

Discalimer：当页面加载时，将加载“A”到“E”下面的所有内容，然后我只想根据更改（点击按钮）随意显示。我认为这是在javascript中完成的，但我太绿了，无法处理这种复杂程度，因此向更有经验的用户寻求建议。

Answer 1

试试这个：

＆＃13;

＆＃13;

$(document).ready(function() {
  
  $("li").on("click",function(){

     $("li").removeClass("clicked");

     $(this).addClass("clicked");

     $(".content").text("This is : " + $(this).text());
    
     })
  
 })

＆＃13;

li {
  display: inline-block;
  width: 60px;
  padding: 5px;
  text-align: center;
  position: relative;
  top: 3px;
  left: 20px;
  cursor: pointer;
}
.content {
  border: 3px solid skyblue;
  height: 200px;  
  width: 460px;
  text-align: center;
  line-height: 200px;
}
.clicked {
  border:3px solid skyblue;
  border-bottom: 4px solid #fff;
}

＆＃13;

<ul>
  <li class="clicked">A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <div class="content"></div>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以按照评论中提到的那样使用Jquery https://jqueryui.com/tabs/

或者你可以看看使用Bootstrap等前端框架 http://getbootstrap.com/javascript/#tabs