我真的需要你的帮助，
由于我的标签是动态生成的，因此它们具有与使用相同元素标识的其他标签相同的外观和感觉。例如，如何单独进入元素名称为XAL-2018-789101的选项卡内容，并设置输入id“fileno”的值。或者我应该使用其他方法重组这个？因为它不是你的平均形式，只有一个表单元素，每次使用唯一的id来个性化表单元素？
使用jQuery的答案也很好。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="tabs_container" style="display: none;">
<ul class="tabs">
<li><a href='#tab1'>XAL-2018-123456</a></li>
<li><a href='#tab2'>XAL-2018-789101</a></li>
<li><a href='#tab3'>XAL-2018-111213</a></li>
</ul>
<div class="tab_container">
<div class="tab_wrapper">
<div id='tab1' class='tab_content' name='XAL-2018-123456'><input type="text" id="fileno"></div>
<div id='tab2' class='tab_content' name='XAL-2018-789101'><input type="text" id="fileno"></div>
<div id='tab3' class='tab_content' name='XAL-2018-111213'><input type="text" id="fileno"></div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
这将处理＆＃34;进入相关标签＆＃34;有点 - 但是你试图用它来填充那个输入是什么？
// Hide all tabs but the first
$(".tab_content").hide().first().show();
$(".tabs li a").on("click", function(event) {
// keep the anchor from triggering.
event.preventDefault();
// get the clicked anchor
let tabEl = $(this);
// get its text
let targetName = tabEl.text();
// use that text to choose the right tab.
$(".tab_wrapper [name='" + targetName + "']").show().siblings().hide();
}).tab-container {
border: 1px solid #333;
background: #555;
}
#tab1 {
background: red;
}
#tab2 {
background: grey;
}
#tab3 {
background: lavender;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_pane">
<ul class="tabs">
<li><a href='#tab1'>XAL-2018-123456</a></li>
<li><a href='#tab2'>XAL-2018-789101</a></li>
<li><a href='#tab3'>XAL-2018-111213</a></li>
</ul>
<div class="tab_container">
<div class="tab_wrapper">
<div id='tab1' class='tab_content' name='XAL-2018-123456'>
<input type="text" id="fileno">
</div>
<div id='tab2' class='tab_content' name='XAL-2018-789101'>
<input type="text" id="fileno">
</div>
<div id='tab3' class='tab_content' name='XAL-2018-111213'>
<input type="text" id="fileno">
</div>
</div>
</div>
</div>
如果您只是想将所选链接的内容放入文本输入中，请尝试这样的操作。它与上面的内容非常相似，但只有一个标签，我实际上在文本字段中插入了一些东西。
// No tabs to hide in this case -- we're just
// toggling the content of a single 'tab'.
$(".tabs li a").on("click", function(event){
// stop the anchor from doing what anchors do
event.preventDefault();
// save a reference to the clicked link.
let tabEl = $(this);
// save the text of the clicked link.
let targetName = tabEl.text();
// get a reference to the tab pane.
let tabPane = $(".tab_content");
// set the value of the input to the text.
tabPane.children("#fileno").val(targetName);
}).tab-container {
border: 1px solid #333;
background: #555;
}
#tab1 {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_pane">
<ul class="tabs">
<li><a href='#tab1'>XAL-2018-123456</a></li>
<li><a href='#tab2'>XAL-2018-789101</a></li>
<li><a href='#tab3'>XAL-2018-111213</a></li>
</ul>
<div class="tab_container">
<div class="tab_wrapper">
<div class='tab_content'>
<input type="text" id="fileno">
</div>
</div>
</div>
</div>
所以问题已经改变了。选项卡是动态的，内容正在更新，输入是一个文本输入，用于填充新选项卡上表单中的file-no字段。这是一个有效的回顾吗？如果是这样，这可能会做你正在寻找的。很大程度上，这是从关于动态标签的jQueryUI页面直接撕掉的。
// use jqueryUI to create my tabs.
let tabs = $("#tabs_pane").tabs();
// handle the click on the 'add tab' button
$(".add-tab").on("click", addTab);
// save a reference to the input field for the new tab
let tabNameEl = $("[name='file-no']"),
// create the text for any new tabs -- not the tab pane, but the tab.
tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
// get the count for the NEXT tab to be created.
tabCounter = $(".tab-pane").length + 1;
// Actual addTab function: adds new tab using the input from the form above
function addTab() {
// If there is a value to the fileno field, otherwise default.
var label = tabNameEl.val() || "Tab " + tabCounter,
// set an id on this tab
id = "tabs-" + tabCounter,
// create the LI for the tabs list
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
// create the content for the new tab pane. I'm cloning the first tab,
// but you may want something a LOT more robust.
tabContentHtml = $(".tab-pane").first().children().first().clone(),
// container for the new tab content. Note that i set the ID here.
newTabEl = $("<div>").attr("id", id).addClass("tab-pane");
// stick that tab content into the new tab pane, after I have
// updated that file-no input field
tabContentHtml.find("[name='file-no']").val(label);
newTabEl.append(tabContentHtml)
// append the tab to the tabs-list.
tabs.find(".ui-tabs-nav").append(li);
// append the tab pane to the actual container
tabs.append(newTabEl);
tabs.tabs("refresh");
// I also want to toggle the new pane to be
// the active one...
tabs.tabs("option", "active", tabCounter-1);
tabCounter++;
}.tab-container {
border: 1px solid #333;
background: #555;
}
#tab1 {
background: red;
}
.add-new-tab {
border: 1px solid black;
background: #333;
color: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="add-new-tab">
<label>Add new tab (enter a file no):
<input type=text name="file-no" />
<button class="add-tab">
Add tab
</button>
</label>
</div>
<div id="tabs_pane">
<ul class="tabs">
<li><a href='#tabs-1'>XAL-2018-123456</a></li>
<li><a href='#tabs-2'>XAL-2018-789101</a></li>
<li><a href='#tabs-3'>XAL-2018-111213</a></li>
</ul>
<div class="tab-pane" id="tabs-1">
<form>
<label>File no:
<input type="text" name="file-no" value="XAL-2018-123456" />
</label>
<fieldset>
<label>Owner name:
<input type="text" name="owner-name" />
</label>
</fieldset>
</form>
</div>
<div class="tab-pane" id="tabs-2">
<form>
<label>File no:
<input type="text" name="file-no" value="XAL-2018-789101" />
</label>
<fieldset>
<label>Owner name:
<input type="text" name="owner-name" />
</label>
</fieldset>
</form>
</div>
<div class="tab-pane" id="tabs-3">
<form>
<label>File no:
<input type="text" name="file-no" value="XAL-2018-111213" />
</label>
<fieldset>
<label>Owner name:
<input type="text" name="owner-name" />
</label>
</fieldset>
</form>
</div>
</div>