在调用api填充选项卡后，如何在选项卡之间切换?

Question

使用api，我能够获得我需要的文章列表。我的目标是创建一个导航选项卡，当点击时在各个部分之间切换。(一节包含许多文章)

<div class="tabs">
<input type="radio" name="tabs-1" id="tabs-1-0" onclick="location.href='/homepage';">
<label class="tabs__title" for="tabs-1-0">
<span class="tabs__separator">
Home
</span>
</label>
<input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-1" value="360003487117">
<label class="tabs__title" for="tabs-1-1">
<span class="tabs__separator">
Potatoes
</span>
</label>
<input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-2" value="360003487177">
<label class="tabs__title" for="tabs-1-2">
<span class="tabs__separator">
Mushrooms
</span>
</label>
<div class="tabs__panel">
<div class="tabs__panel__content">
</div>
<div class="tabs__panel__content">
</div>
<div class="tabs__panel__content">
</div>
</div>
</div>

我设法得到到目前为止，但我有一些问题，使切换工作。我这里的问题是，它只是把现有的加起来，而不删除前一个。

var sct_select = $( "input[type=radio][name=tabs-1]:checked" ).val();
$.getJSON('/api/sections/'+ sct_select + '/articles.json', function(data) { 
$.each(data.articles, function(index,item) {
var style1 = '<p><a href="'+ item.html_url + '">' + item.title + '</a></p>'
$('.tabs__panel__content').append(style1);

});
$( ".tabs__panel__content" ).toggle( "slow" );
});
}); ```

Answer 1

要有一个示例功能，你必须做一些工作来创建选项卡:(这个示例不能用于home按钮，因为你在html中有一个单击事件)

默认情况下，它总是显示的第一个标签

$( ".tabs__panel" ).tabs();
$("input.radioBtn").on("click", function () {
var index = $("input.radioBtn").index(this);
var sct_select = $(this).val();

//toggle to the desired tab following the index of button clicked)
$( ".tabs__panel" ).tabs({ active: index + 1 });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tabs">
<input type="radio" name="tabs-1" id="tabs-1-0" onclick="location.href='/homepage';">
<label class="tabs__title" for="tabs-1-0">
<span class="tabs__separator">
Home
</span>
</label>
<input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-1" value="360003487117">
<label class="tabs__title" for="tabs-1-1">
<span class="tabs__separator">
Potatoes
</span>
</label>
<input type="radio" class="radioBtn" name="tabs-1" id="tabs-1-2" value="360003487177">
<label class="tabs__title" for="tabs-1-2">
<span class="tabs__separator">
Mushrooms
</span>
</label>
<div class="tabs__panel">
<ul>
<li><a href="#tab0"><span>Home</span></a></li>
<li><a href="#tab1"><span>Potates</span></a></li>
<li><a href="#tab2"><span>Mushrooms</span></a></li>
</ul>
<div class="tabs__panel__content" id="tab0">
</div>
<div class="tabs__panel__content" id="tab1">
</div>
<div class="tabs__panel__content" id="tab2">
</div>
</div>
</div>