个人中心
gpt4 book ai didi

javascript - 选项卡在外部单击时不在焦点

转载 作者：行者123 更新时间：2023-11-28 17:28:49 24 4
gpt4 key购买 nike

我有一个包含四个选项卡的网页。它工作正常，除了当我在包含选项卡及其内容的 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 .

如何解决？

最佳答案

看看附件片段

$(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>

关于javascript - 选项卡在外部单击时不在焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37967422/

24 4 0
文章推荐： javascript - 在 React 生命周期方法中使用本地方法
文章推荐： css - 更改响应式 div 显示
文章推荐： javascript - AngularJS 版本 6.* 服务方法即将推出未定义
文章推荐： javascript - OwlCarousel 不显示 Bootstrap 3
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com