改变单元格的内容 - 的JavaScript

Question

它存在的库或某些功能设置它执行following_

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

Answer 1

你可以看看在评论中提到的使用JQuery。
https://jqueryui.com/tabs/

或者你可以看看使用的前端框架，如引导 http://getbootstrap.com/javascript/#tabs

Answer 2

试试这个：

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

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

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

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

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

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