我正在使用bootstrap在我的页面上创建一个标签式界面。从功能上来说，我按照我喜欢的方式工作但是我已经硬编码并且复制了很多代码，这些代码可以更好地动态处理。我想选择扩展我的奴隶标签。如果我要使用当前的设置来执行此操作，我将会有更多重复的代码。
这是我到目前为止所做的：
<section>
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
<br />
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
</li>
<li class="nav-item">
<a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
</li>
<li class="nav-item">
<a href="#slave1" class="nav-link" role="tab" data-toggle="tab">Slave 1</a>
</li>
<li class="nav-item">
<a href="#slave2" class="nav-link" role="tab" data-toggle="tab">Slave 2</a>
</li>
<li class="nav-item">
<a href="#slave3" class="nav-link" role="tab" data-toggle="tab">Slave 3</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="run">
<div>
{% for spkVersion, spkObject in results %}
{% for sVersion, sObject in spkObject %}
{% for jobRun in sObject.jobRuns %}
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #{{ jobRun.runNumber }}</span>
<span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ jobRun.jobType }}.log</span>
</div>
<div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
<div role="tabpanel" class="tab-pane" id="master">
{% for spkVersion, spkObject in results %}
{% for sVersion, sObject in spkObject %}
{% for jobRun in sObject.jobRuns %}
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #{{ jobRun.runNumber }}</span>
<span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-master.log</span>
</div>
<div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<div role="tabpanel" class="tab-pane" id="slave1">
{% for spkVersion, spkObject in results %}
{% for sVersion, sObject in spkObject %}
{% for jobRun in sObject.jobRuns %}
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #{{ jobRun.runNumber }}</span>
<span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave1.log</span>
</div>
<div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<div role="tabpanel" class="tab-pane" id="slave2">
{% for spkVersion, spkObject in results %}
{% for sVersion, sObject in spkObject %}
{% for jobRun in sObject.jobRuns %}
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #{{ jobRun.runNumber }}</span>
<span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave2.log</span>
</div>
<div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<div role="tabpanel" class="tab-pane" id="slave3">
{% for spkVersion, spkObject in results %}
{% for sVersion, sObject in spkObject %}
{% for jobRun in sObject.jobRuns %}
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #{{ jobRun.runNumber }}</span>
<span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ this.slaveId }}.log</span>
</div>
<div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}
{% block pageScript %}
<script>
//run log
$(document).ready(function(){
$(".jobRunLogContainer").each(function( index ) {
var jobRunLogContainer = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer.html(data);
}
});
});
});
//master log
$(document).ready(function(){
$(".jobRunLogContainer2").each(function( index ) {
var jobRunLogContainer2 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer2.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer2.html(data);
}
});
});
});
//slave1 log
$(document).ready(function(){
$(".jobRunLogContainer3").each(function( index ) {
var jobRunLogContainer3 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave1";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer3.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer3.html(data);
}
});
});
});
//slave2 log
$(document).ready(function(){
$(".jobRunLogContainer4").each(function( index ) {
var jobRunLogContainer4 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave2";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer4.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer4.html(data);
}
});
});
});
//slave3 log
$(document).ready(function(){
$(".jobRunLogContainer5").each(function( index ) {
var jobRunLogContainer5 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave2";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer5.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer5.html(data);
}
});
});
});
</script>
{% endblock %}
我从hosts文件中找到了这样的药膏：
xxx.xxx.xxx.xxx slave1
xxx.xxx.xxx.xxx slave2
xxx.xxx.xxx.xxx slave3
是否可以从hosts文件中获取slave标签名称，还可以使用一个函数而不是3来显示当前设置的从属日志文件吗？
添加输出HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Runner</h1>
</header>
<div class="contentWrapper">
<h2>Job Log</h2>
<section>
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
<br />
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
</li>
<li class="nav-item">
<a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
</li>
<li class="nav-item">
<a href="#slave1" class="nav-link" role="tab" data-toggle="tab">slave 1</a>
</li>
<li class="nav-item">
<a href="#slave2" class="nav-link" role="tab" data-toggle="tab">slave 2</a>
</li>
<li class="nav-item">
<a href="#slave3" class="nav-link" role="tab" data-toggle="tab">slave 3</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="run">
<div>
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #1</span>
<span class="monospace" style="margin-left: 50px;">1-teragen.log</span>
</div>
<div data-jobRunId="1" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="master">
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #1</span>
<span class="monospace" style="margin-left: 50px;">1-master.log</span>
</div>
<div data-jobRunId="1" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
</div>
<div role="tabpanel" class="tab-pane" id="slave1">
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #1</span>
<span class="monospace" style="margin-left: 50px;">1-slave1.log</span>
</div>
<div data-jobRunId="1" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
</div>
<div role="tabpanel" class="tab-pane" id="slave2">
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #1</span>
<span class="monospace" style="margin-left: 50px;">1-slave2.log</span>
</div>
<div data-jobRunId="1" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
</div>
<div role="tabpanel" class="tab-pane" id="slave3">
<div class="fontSize14 margin20 marginBottom5">
<span class="bold">Run #1</span>
<span class="monospace" style="margin-left: 50px;">1-.log</span>
</div>
<div data-jobRunId="1" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
Loading log file...
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click", ".backToMain", function(){
window.location = "/jobs";
});
});
</script>
<script>
//run log
$(document).ready(function(){
$(".jobRunLogContainer").each(function( index ) {
var jobRunLogContainer = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer.html(data);
}
});
});
});
//master log
$(document).ready(function(){
$(".jobRunLogContainer2").each(function( index ) {
var jobRunLogContainer2 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer2.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer2.html(data);
}
});
});
});
//slave1 log
$(document).ready(function(){
$(".jobRunLogContainer3").each(function( index ) {
var jobRunLogContainer3 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave1";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer3.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer3.html(data);
}
});
});
});
//slave2 log
$(document).ready(function(){
$(".jobRunLogContainer4").each(function( index ) {
var jobRunLogContainer4 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave2";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer4.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer4.html(data);
}
});
});
});
//slave3 log
$(document).ready(function(){
$(".jobRunLogContainer5").each(function( index ) {
var jobRunLogContainer5 = $(this);
var jobRunId = $(this).attr("data-jobRunId");
var slaveId = "slave3";
var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
$.ajax({
url: url,
type: 'GET',
error: function(XMLHttpRequest, textStatus, errorThrown){
jobRunLogContainer5.html("ERROR: Log file not found");
},
success: function(data){
jobRunLogContainer5.html(data);
}
});
});
});
</script>
</html>