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

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

转载作者：行者123 更新时间：2023-11-28 17:28:49

24

4

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

带有通配符的 webpack 外部
如何指示 webpack 排除所有 d3 模块？ // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
Scala 外部 => 语法
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
javascript - 外部 for 循环时的非线性性能
这是一个简单的循环，我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
jquery - 外部+内联样式与仅外部样式
问题+概述下面是两个片段，其中包含最初隐藏的 div，然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
javascript - 外部.js文件获取不到页面元素？
我有一个 HTML 页面和一个单独的 .js 文件，该文件包含在带有的页面中标签。这是我的 .js 文件: element = document.getElementById("test");
类的第二个实现文件中静态字段的 C++ 外部？
我在 linux 静态库项目中有 3 个文件，我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
javascript - 外部单击以重置颜色？
我正在尝试将颜色背景更改为默认背景颜色，当我点击输入框外我尝试使用“null”或“none”但没有用？ window.addEventListener('click', outsideClick);
Android 文件选择器将音频文件重定向到/外部
我正在编写一个应用程序，要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
android - 外部-内部存储
在 android 中，不可移动(内部)的外部存储和内部存储有什么区别？我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据谢谢最佳答案在许多较新的设备中，将不再有物理区别，
c++ - 外部、链接和全局变量
在 C++ 中，假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
C++ 外部/多重定义
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别？实现A namespace Ada { extern "C" { int getN
jQuery: 外部 html()
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。想象一下我们有这样的东西: Hello World 如果我们这样
vb6 - 外部 DLL 应该放在哪里？
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
javascript - 外部 Javascript 文件获取？
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
svn - 如何部署 Subversion 外部？
我们正在使用 SVN 试水，并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块模块一模块二模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
Kubernetes 外部 ip 负载均衡器裸机
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务？我在裸机上运行 Kubernetes。谢谢最佳答案使用 nodePort 类型的服务，它会将您的服务绑定(bind)到所有节
symfony - generateUrl 外部 Controller
是否有可能在 Controller 之外使用 generateUrl() 方法？我尝试在带有 $this->get('router') 的自定义存储库类中使用它，但它没有用。更新我在这里找到了一
Angular 作为 Webpack 外部
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。如果我只是移动 '@angular/compil
gradle - 创建一个依赖于另一个(外部)插件的Gradle插件
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项，或者得到了: 您不能更改处于未解析状态的
r - 创建自定义几何图形来计算汇总统计数据并在绘图区域*外部*显示它们
我是R包的创建者EnvStats . 有一个我经常使用的函数，叫做 stripChart .我刚开始学习ggplot2 ，并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack

首页

博学

6Ren·AI

商城

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