0
私は実際にコードの専門家または専門家の助けを必要としています。新しく作成されたUL LI要素のクリックイベント
私が理解できないのは、以下の既存のコードでは、新しいタブが作成された後、add_new_tab（）関数を呼び出した後、アクティブなタブを別のタブに変更してから戻る新しく作成されたタブで、アクティブなクラスがLIに適用されず、タブのコンテンツが切り替えられないことがわかります。
私は自分の頭から頭を引き裂いて、他のすべてがうまく動作するときにこれを理解しようとしています（新しく作成されたタブではありません）。ここで
は私のHTMLマークアップです：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid rgb(109,109,109);
border-left: 1px solid rgb(109,109,109);
width: 100%;
display: flex;
position: relative;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 32px;
line-height: 32px;
border-top: 1px solid rgb(109,109,109);
border-right: 1px solid rgb(109,109,109);
border-bottom: 1px solid rgb(109,109,109);
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 8pt;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 0;
font-weight: bold;
}
.tab_container {
border: 1px solid rgb(109,109,109);
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
width: 100%;
height: 500px;
padding: 2px;
}
.tab_wrapper {
background: rgb(231,231,226);
height: 100%;
}
.tab_content {
padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
init_form()
});
function init_form() {
//INITIALIZE TABS
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").on('click', function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
}
function add_new_tab() {
var num_tabs = $("ul.tabs li").length
var fileno = ($("#fileno").val()) ? $("#fileno").val() : '(New)'
//debug: alert(num_tabs)
if (num_tabs == 0) {
$(".tabs").show()
$(".tab_container").show()
}
$("ul.tabs li").removeClass("active"); //Remove any previous "active" class set on any tabs
$(".tab_content").hide(); //Hide all previous tab content
$("ul.tabs").append("<div class='close_wrapper'><li class='active'><a href='#tab" + num_tabs + "'>"+ fileno +"</a><span class='close'></span></li></div>").show()
$(".tab_wrapper").append("<div id='tab" + num_tabs +"' class='tab_content'>I've inserted a new tab for you</div>").hide().fadeIn() //INSERTS NEW TAB CONTENT
}
</script>
</head>
<body>
</body>
</html>
あなたは（ 'クリック'、 '李'、機能（）{ 'の代わりに' $（上。 – brk
試し '$（ "ul.tabs"）までのHTMLマークを共有していないにもデモを作成してください"ul.tabs li"）。on（ 'click'、function（）{' –
ページあたりのHTML属性ID値は1つしか指定できません。 – PHPglue