我有一个包含四个标签的网页。它工作正常，除非我在div外面点击，包含标签及其内容，活动标签上的焦点丢失，这是不可取的。
代码
<body>
<img src="images/2.png" style="width: 950px; height: 60px;">
<div style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test
</div>
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;">
<a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a>
</div>
<div style="margin-top: 100px;">
<ul id="tabs" class="tab">
<li><a id="load" href="#" class="tablinks" onclick="openTab(event, 'Reference')">Reference</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestStrategy')">Test Strategy</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestCase')">Test Case</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestSummary')">Test Summary</a></li>
</ul>
<img src="images/line.png" style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;">
<div id="Reference" class="tabcontent">
<p>Document_1.docx</p>
<hr align="left">
<p>Document_2.docx</p>
<hr align="left">
<p>Document_3.docx</p>
<hr align="left">
</div>
<div id="TestStrategy" class="tabcontent">
<p>TS_1.docx</p>
<hr align="left">
<p>TS_2.docx</p>
<hr align="left">
</div>
<div id="TestCase" class="tabcontent">
<p>TC_1.xlsx</p>
<hr align="left">
<p>TC_2.xlsx</p>
<hr align="left">
<p>TC_3.xlsx</p>
<hr align="left">
<p>TC_4.xlsx</p>
<hr align="left">
<p>TC_5.xlsx</p>
<hr align="left">
</div>
<div id="TestSummary" class="tabcontent">
<p>Summary_1.docx</p>
<hr align="left">
<p>Summary_2.pdf</p>
<hr align="left">
<p>Summary_3.ppt</p>
<hr align="left">
</div>
</div>
</body>
这是fiddle。
如何解决这个问题？
答案 0 :(得分：1)
看一下附件摘录
$(document).ready(function(){
alert("Loaded");
document.getElementById('Reference').style.display = "block";
document.getElementById('load').focus();
});
function openTab(evt, tabName) {
//alert(evt + "-" + tabName);
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tabcontent.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}body {
font-family:"Segoe UI";
font-size:75%;
width:1024px;
/* height: 760px;*/
line-height:1;
outline:none;
overflow:auto;
background:url(../images/1.png);
margin:0 auto;
background-repeat: no-repeat;
background-size: 1024px 760px;
background-attachment: fixed;
background-position: center;
/* background-color: #cccccc;*/
}
.active{
background:#333f50 !important;
}
hr {
height: 10px;
width: 69.2%;
/* margin-left: -7px;*/
border: 0;
box-shadow: 0 10px 6px -10px #bababa inset;
}
/* Style the list */
ul.tab {
list-style-type: none;
margin-left: 5px;
padding: 0;
overflow: hidden;
/* border: 3px solid red;*/
width: 485px;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: white;
background-color: #ADB9CA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family:Segoe UI;
border: 1px solid #CCC;
/* margin-left: 2px;*/
}
/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #333F50;}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
/* border: 1px solid #ccc;*/
border-top: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/2.png" style="width: 950px; height: 60px;">
<div
style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test
</div>
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;">
<a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a>
</div>
<div style="margin-top: 100px;">
<ul id="tabs" class="tab">
<li><a id="load" href="#" class="tablinks" onclick="openTab(event, 'Reference')">Reference</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestStrategy')">Test Strategy</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestCase')">Test Case</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'TestSummary')">Test Summary</a></li>
</ul>
</div>
<img src="images/line.png"
style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;">
<div id="Reference" class="tabcontent">
<p>Document_1.docx</p>
<hr align="left">
<p>Document_2.docx</p>
<hr align="left">
<p>Document_3.docx</p>
<hr align="left">
</div>
<div id="TestStrategy" class="tabcontent">
<p>TS_1.docx</p>
<hr align="left">
<p>TS_2.docx</p>
<hr align="left">
</div>
<div id="TestCase" class="tabcontent">
<p>TC_1.xlsx</p>
<hr align="left">
<p>TC_2.xlsx</p>
<hr align="left">
<p>TC_3.xlsx</p>
<hr align="left">
<p>TC_4.xlsx</p>
<hr align="left">
<p>TC_5.xlsx</p>
<hr align="left">
</div>
<div id="TestSummary" class="tabcontent">
<p>Summary_1.docx</p>
<hr align="left">
<p>Summary_2.pdf</p>
<hr align="left">
<p>Summary_3.ppt</p>
<hr align="left">
</div>
</div>
答案 1 :(得分：0)
如果您可以使用title中的标签名称，则此处的代码更为整洁。 Fiddle
$(function() {
var tab = $('.active').attr('title');
$('#' + tab).show();
$('ul.tab a').click(function() {
tab = $(this).attr('title');
$('.tabcontent').hide();
$('ul.tab a').removeClass('active');
$(this).addClass('active');
$('#' + tab).show();
});
})body {
font-family: "Segoe UI";
font-size: 75%;
width: 1024px;
/* height: 760px;*/
line-height: 1;
outline: none;
overflow: auto;
background: url(../images/1.png);
margin: 0 auto;
background-repeat: no-repeat;
background-size: 1024px 760px;
background-attachment: fixed;
background-position: center;
/* background-color: #cccccc;*/
}
hr {
height: 10px;
width: 69.2%;
/* margin-left: -7px;*/
border: 0;
box-shadow: 0 10px 6px -10px #bababa inset;
}
/* Style the list */
ul.tab {
list-style-type: none;
margin-left: 5px;
padding: 0;
overflow: hidden;
/* border: 3px solid red;*/
width: 485px;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {
float: left;
}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: white;
background-color: #ADB9CA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
border: 1px solid #CCC;
/* margin-left: 2px;*/
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus,
ul.tab li a.active {
background-color: #333F50;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
/* border: 1px solid #ccc;*/
border-top: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="images/2.png" style="width: 950px; height: 60px;">
<div style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;">Test
</div>
<div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;">
<a href="#" title="Logout"><img src="images/logout.png" style="width: 78px; height: 73px;"></a>
</div>
<div style="margin-top: 100px;">
<ul id="tabs" class="tab">
<li><a class="active" href="#" class="tablinks" title="Reference">Reference</a></li>
<li><a href="#" class="tablinks" title="TestStrategy">Test Strategy</a></li>
<li><a href="#" class="tablinks" title="TestCase">Test Case</a></li>
<li><a href="#" class="tablinks" title="TestSummary">Test Summary</a></li>
</ul>
<img src="images/line.png" style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;">
<div id="Reference" class="tabcontent">
<p>Document_1.docx</p>
<hr align="left">
<p>Document_2.docx</p>
<hr align="left">
<p>Document_3.docx</p>
<hr align="left">
</div>
<div id="TestStrategy" class="tabcontent">
<p>TS_1.docx</p>
<hr align="left">
<p>TS_2.docx</p>
<hr align="left">
</div>
<div id="TestCase" class="tabcontent">
<p>TC_1.xlsx</p>
<hr align="left">
<p>TC_2.xlsx</p>
<hr align="left">
<p>TC_3.xlsx</p>
<hr align="left">
<p>TC_4.xlsx</p>
<hr align="left">
<p>TC_5.xlsx</p>
<hr align="left">
</div>
<div id="TestSummary" class="tabcontent">
<p>Summary_1.docx</p>
<hr align="left">
<p>Summary_2.pdf</p>
<hr align="left">
<p>Summary_3.ppt</p>
<hr align="left">
</div>
</div>