javascript - 在 HTML/CSS/javascript 中，单击鼠标并将鼠标悬停在子选项卡内的选项卡上时，代码无法按预期工作-6ren

javascript - 在 HTML/CSS/javascript 中，单击鼠标并将鼠标悬停在子选项卡内的选项卡上时，代码无法按预期工作

转载作者：太空宇宙更新时间：2023-11-04 07:40:06

我在 HTML/CSS/Javascript 中面临显示选项卡的子选项卡内容数据的问题，让我简要描述一下我的场景:

请先执行Snippet代码:

那么，现在发生了什么:当您将鼠标悬停在“选项卡数据”上时，它会显示 3 个选项卡。然后单击每个选项卡将以“粗体”显示其侧选项卡及其第一行的相应文本数据，而无需将鼠标悬停在侧选项卡上。

问题:一旦您开始将鼠标悬停在侧边标签上，它就会出现故障。它会向您显示其各自的数据，但停止显示第一行数据及其在其他选项卡中的文本内容，因为它在您单击时首次加载时显示。当您将鼠标悬停在侧面选项卡上时，它会正常工作。

我想要什么: 所以基本上每当我单击选项卡时，从顶部开始的“粗体”侧选项卡数据的第一行/列及其各自的内容文本应该始终可见。

我可能无法以更好的方式解释，请运行代码段以了解我想说的内容。

function tabmenu(evt, tabname) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabname).style.display = "block";
    evt.currentTarget.className += " active";
}

function sidemenu(evt, sidename) {
	var i, sidetabcontent, sidetablinks;
	sidetabcontent = document.getElementsByClassName("sidetabcontent");
	for (i = 0; i < sidetabcontent.length; i++) {
		sidetabcontent[i].style.display = "none";
	}
	sidetablinks = document.getElementsByClassName("sidetablinks");
	for (i = 0; i < sidetablinks.length; i++) {
		sidetablinks[i].className = sidetablinks[i].className.replace(" active", "");
	}
	document.getElementById(sidename).style.display = "block";
	evt.currentTarget.className += " active";
}

.dropdown {
    display: inline-block;		
}

.dropdown-menu {   
  font-size: 12px;   
  background-color: #ffcc00;      
  min-width: 50px;
}



/* Navigation Menu Bar */
#menu {
    height:45px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;    
}


#menu li {
    float:left;
    text-align:center;
    position:relative;    
    margin-right:10px;
    border:none;
	top: 2px; 	
}
 
#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    
    /* Background color and gradients */     
    background: #ffffff;
    
     
    /* Rounded corners */     
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
 
#menu li > a {
    padding: 11px;
    font-size:14px;     
    display:block;
    outline:0;
    text-decoration:none; 
	color: white;
}
 
#menu li:hover a {
    color:black;
}

/* Drop Down */
.dropdown_work_menu
 {    
    float:right;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 20px 10px 20px;	
    border:1px solid #777777;
    border-top:none;
    background:#ffffff;    
    border-radius: 0px 5px 5px 5px;
}
 
 .dropdown_work_menu { width: 400px;} 

#menu li:hover .dropdown_work_menu
 {
    left:-1px;
    top:auto;
}
 

/* Style the tab */
div.tab {
    overflow: hidden;    
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;    
    transition: 0.3s;
    font-size: 17px;
 	margin-right: 57px;
	padding: 0px;
	
}

/* Change background color of buttons on hover */
div.tab button:hover {    	
	border-bottom: 3px solid #ffcc00;		
	
}

/* Create an active/current tablink class */
div.tab button.active {    
    border-bottom: 3px solid #ffcc00;	
	
}

/* Style the tab content */
.tabcontent {
    display: none;    
    margin-right: 15px;
	margin-top: 6px;
}



/* Style the sidetab */
div.sidetab {
    float: left;
    border-right: 1px solid #aaa;
    
    width: 26%;
	height: 180px;
    
}

/* Style the buttons inside the sidetab */
div.sidetab button {
	background-color: inherit;
    display: block;    
    color: black;    
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;    
    font-size: 17px;
	padding: 0px;
}

div.sidetab button:hover {    	
	font-weight:bold;	
}


/* Create an active/current tablink class */
div.sidetab button.active {    
    font-weight:bold;
	
}

/* Style the sidetab content */
.sidetabcontent {
    float: left;
    padding: 0px 12px;
    border: none;
    width: 74%;
    border-left: none;
    height: 180px;
	display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Otpai - We Do!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
</head>

<body onload="startTime()">
<!-- Start Navbar -->
<nav class="navbar-fixed-top navbar-inverse container-fluid" role="navigation">  	
	<div id="navbar_row_2" class="row" style="box-shadow: 0 2px 4px 0px;">		
		<div class="col-lg-10 pull-left">
			<div class="navbar-collapse " >
				<ul id="menu" class="nav navbar-nav navbar-left" >			
					<li><a href="#" ><b>Tabs Data</b></a>						
						<div class="dropdown_work_menu">														
							<div class="tab">
								<button class="tablinks" onclick="tabmenu(event, 'tab1')" id="defaultOpen">TAB1</button>
								<button class="tablinks" onclick="tabmenu(event, 'tab2')">TAB2</button>
								<button class="tablinks" onclick="tabmenu(event, 'tab3')">TAB3</button>
							</div>
								
							<div id="tab1" class="tabcontent">								
								<div class="sidetab">
									<button class="sidetablinks active" onmouseover="sidemenu(event, 'st1')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st2')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st3')">Side Tab3</button>									
								</div>

								<div id="st1" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-11 content Description.</p>
								</div>
									
								<div id="st2" class="sidetabcontent">									
									<p>SIDE tab-12 content Description.</p>
								</div>
									
								<div id="st3" class="sidetabcontent">									
									<p>SIDE tab-13 content Description.</p>
								</div>
								
							</div>
								
							<div id="tab2" class="tabcontent">
								<div class="sidetab">
									<button class="sidetablinks active" onmouseover="sidemenu(event, 'st21')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st22')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st23')">Side Tab3</button>									
								</div>

								<div id="st21" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-21 content Description.</p>
								</div>
									
								<div id="st22" class="sidetabcontent">									
									<p>SIDE tab-22 content Description.</p>
								</div>
									
								<div id="st23" class="sidetabcontent">									
									<p>SIDE tab-23 content Description.</p>
								</div>
									
								
							</div>
								
							<div id="tab3" class="tabcontent">
								<div class="sidetab">
									<button class="sidetablinks active" onmouseover="sidemenu(event, 'st31')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st32')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st33')">Side Tab3</button>									
								</div>

								<div id="st31" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-31 content Description.</p>
								</div>
									
								<div id="st32" class="sidetabcontent">									
									<p>SIDE tab-32 content Description.</p>
								</div>
									
								<div id="st33" class="sidetabcontent">									
									<p>SIDE tab-33 content Description.</p>
								</div>
									
								
							</div>
								
							<script>
								// Get the element with id="defaultOpen" and click on it
								document.getElementById("defaultOpen").click();
							</script>
						</div>
					</li>

					
				</ul>
			</div>
		</div>			
	</div>


	
</nav>
<!-- End Navbar -->

</body>

</html>

最佳答案

当sidemenu函数将所有sidetabcontent项的样式更改为隐藏时出现问题，直到mouseover事件再次触发sidemenu函数才再次插入显示样式。

要保证标签菜单功能显示第一项，必须重新设置css & class 你可以添加:

document.getElementById(tabname).children[1].style.display = 'block';
document.getElementById(tabname).children[0].children[0].className += " active";

您需要更改侧边栏链接的标记，以便在用户选择标签之前它们不再处于事件状态:

<button class="sidetablinks" onmouseover="sidemenu(event, 'st1')">Side Tab1</button>

完整代码:

            function tabmenu(evt, tabname) {
                var i, tabcontent, tablinks, sidetablinks, sidetabcontent;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                sidetablinks = document.getElementsByClassName("sidetablinks");
                for (i = 0; i < sidetablinks.length; i++) {
                    sidetablinks[i].className = sidetablinks[i].className.replace(" active", "");
                }
                sidetabcontent = document.getElementsByClassName("sidetabcontent");
                for (i = 0; i < sidetabcontent.length; i++) {
                    sidetabcontent[i].style.display = "none";
                }
                document.getElementById(tabname).style.display = "block";
                document.getElementById(tabname).children[1].style.display = 'block';
                document.getElementById(tabname).children[0].children[0].className += " active";
                evt.currentTarget.className += " active";
            }

            function sidemenu(evt, sidename) {
                var i, sidetabcontent, sidetablinks;
                sidetabcontent = document.getElementsByClassName("sidetabcontent");
                for (i = 0; i < sidetabcontent.length; i++) {
                    sidetabcontent[i].style.display = "none";
                }
                sidetablinks = document.getElementsByClassName("sidetablinks");
                for (i = 0; i < sidetablinks.length; i++) {
                    sidetablinks[i].className = sidetablinks[i].className.replace(" active", "");
                }
                document.getElementById(sidename).style.display = "block";
                evt.currentTarget.className += " active";
            }

.dropdown {
    display: inline-block;		
}

.dropdown-menu {   
  font-size: 12px;   
  background-color: #ffcc00;      
  min-width: 50px;
}



/* Navigation Menu Bar */
#menu {
    height:45px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;    
}


#menu li {
    float:left;
    text-align:center;
    position:relative;    
    margin-right:10px;
    border:none;
	top: 2px; 	
}
 
#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    
    /* Background color and gradients */     
    background: #ffffff;
    
     
    /* Rounded corners */     
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
 
#menu li > a {
    padding: 11px;
    font-size:14px;     
    display:block;
    outline:0;
    text-decoration:none; 
	color: white;
}
 
#menu li:hover a {
    color:black;
}

/* Drop Down */
.dropdown_work_menu
 {    
    float:right;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 20px 10px 20px;	
    border:1px solid #777777;
    border-top:none;
    background:#ffffff;    
    border-radius: 0px 5px 5px 5px;
}
 
 .dropdown_work_menu { width: 400px;} 

#menu li:hover .dropdown_work_menu
 {
    left:-1px;
    top:auto;
}
 

/* Style the tab */
div.tab {
    overflow: hidden;    
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;    
    transition: 0.3s;
    font-size: 17px;
 	margin-right: 57px;
	padding: 0px;
	
}

/* Change background color of buttons on hover */
div.tab button:hover {    	
	border-bottom: 3px solid #ffcc00;		
	
}

/* Create an active/current tablink class */
div.tab button.active {    
    border-bottom: 3px solid #ffcc00;	
	
}

/* Style the tab content */
.tabcontent {
    display: none;    
    margin-right: 15px;
	margin-top: 6px;
}



/* Style the sidetab */
div.sidetab {
    float: left;
    border-right: 1px solid #aaa;
    
    width: 26%;
	height: 180px;
    
}

/* Style the buttons inside the sidetab */
div.sidetab button {
	background-color: inherit;
    display: block;    
    color: black;    
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;    
    font-size: 17px;
	padding: 0px;
}

div.sidetab button:hover {    	
	font-weight:bold;	
}


/* Create an active/current tablink class */
div.sidetab button.active {    
    font-weight:bold;
	
}

/* Style the sidetab content */
.sidetabcontent {
    float: left;
    padding: 0px 12px;
    border: none;
    width: 74%;
    border-left: none;
    height: 180px;
	display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Otpai - We Do!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
</head>

<body onload="startTime()">
<!-- Start Navbar -->
<nav class="navbar-fixed-top navbar-inverse container-fluid" role="navigation">  	
	<div id="navbar_row_2" class="row" style="box-shadow: 0 2px 4px 0px;">		
		<div class="col-lg-10 pull-left">
			<div class="navbar-collapse " >
				<ul id="menu" class="nav navbar-nav navbar-left" >			
					<li><a href="#" ><b>Tabs Data</b></a>						
						<div class="dropdown_work_menu">														
							<div class="tab">
								<button class="tablinks" onclick="tabmenu(event, 'tab1')" id="defaultOpen">TAB1</button>
								<button class="tablinks" onclick="tabmenu(event, 'tab2')">TAB2</button>
								<button class="tablinks" onclick="tabmenu(event, 'tab3')">TAB3</button>
							</div>
								
							<div id="tab1" class="tabcontent">								
								<div class="sidetab">
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st1')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st2')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st3')">Side Tab3</button>									
								</div>

								<div id="st1" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-11 content Description.</p>
								</div>
									
								<div id="st2" class="sidetabcontent">									
									<p>SIDE tab-12 content Description.</p>
								</div>
									
								<div id="st3" class="sidetabcontent">									
									<p>SIDE tab-13 content Description.</p>
								</div>
								
							</div>
								
							<div id="tab2" class="tabcontent">
								<div class="sidetab">
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st21')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st22')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st23')">Side Tab3</button>									
								</div>

								<div id="st21" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-21 content Description.</p>
								</div>
									
								<div id="st22" class="sidetabcontent">									
									<p>SIDE tab-22 content Description.</p>
								</div>
									
								<div id="st23" class="sidetabcontent">									
									<p>SIDE tab-23 content Description.</p>
								</div>
									
								
							</div>
								
							<div id="tab3" class="tabcontent">
								<div class="sidetab">
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st31')">Side Tab1</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st32')">Side Tab2</button>
									<button class="sidetablinks" onmouseover="sidemenu(event, 'st33')">Side Tab3</button>									
								</div>

								<div id="st31" class="sidetabcontent" style="display: block;">									
									<p>SIDE tab-31 content Description.</p>
								</div>
									
								<div id="st32" class="sidetabcontent">									
									<p>SIDE tab-32 content Description.</p>
								</div>
									
								<div id="st33" class="sidetabcontent">									
									<p>SIDE tab-33 content Description.</p>
								</div>
									
								
							</div>
								
							<script>
								// Get the element with id="defaultOpen" and click on it
								document.getElementById("defaultOpen").click();
							</script>
						</div>
					</li>

					
				</ul>
			</div>
		</div>			
	</div>


	
</nav>
<!-- End Navbar -->

</body>

</html>

关于javascript - 在 HTML/CSS/javascript 中，单击鼠标并将鼠标悬停在子选项卡内的选项卡上时，代码无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48607342/

文章推荐： java - 通过 Oracle Search 和 Export 提取多个嵌入文件

文章推荐： Java 点对点聊天应用程序

文章推荐： c - Unix Shell 在 C 中实现 Cat - 文件描述符问题

jQuery:检测cmd+单击/control+单击
我在选项卡中有我的网络应用程序的选项。 aaa bbb ccc ddd eee 当用户单击任何选项卡(在同一窗口中)时，我会使用此代码获得淡出效果，然后自动
javascript - 简单单击强制包含单击
如何获得一个简单的调用单击来实现如下功能:http://jsfiddle.net/ftwPS/6/我显然错过了一些基本的东西，因为当您单击“CLICK”时这不起作用。 $('tr').click(fu
javascript - 单击(单击)时 Angular 6 更改最近的图标
我有一个列表，在左侧显示一个插入符号图标，单击它时应该更改图标。每当我单击一个图标时，所有图标都会更改。 detailedInfo = []; subordinateInfo; openSu
javascript - 单击 div 会触发 $ ('body' 的绑定(bind)。单击
我有一个 div，我想对其进行设置，以便当我单击其他内容时，它会隐藏该 div。我也是这样 $('body').click(function(){ if(loginOpened) {
javascript - 单击 div 1，打开新内容。单击 div 2 打开 div1 的内容
我有很多装有不同内容的盒子。如果单击第一个框，您可以看到一个包含更多详细信息的弹出框。如果单击第二个、第三个等框，您必须查看这些框的详细信息。我的问题:如果我点击框号。 2 我看到了盒子号的详细信
javascript - 单击 button1 并将文本添加到 div，单击 button2 并删除文本和 css 样式 button1
当我点击 .add-btn 时，我将 .add-btn 的样式更改为 background:#cccccc 并将 val() 更改为“-”。现在当我用 tr td .list 删除添加的文本时，它是
jQuery - 单击 LI，显示/隐藏 UL - 单击 LI :a href, 继续显示 UL 并在空白窗口中打开
感谢 SO 的出色贡献者!当您开始了解 jQuery 时，它会变得更酷。 :) 所以我有一个 LI，单击时会显示/隐藏子 UL。我想做的是能够单击 LI 内的链接，打开一个空白窗口，但也不会关闭子 U
JavaScript 单击
我有这份文档，它使我能够获得一份带有点击进度的多项选择选择调查问卷。如何用图像代替此处的文字？ (并且仍然有这样的机制，一旦单击[图像]，就会提出下一个问题) 我已经尝试使用 UL/H1 设置背景图
刷新按钮上的 JQgrid 单击
我想在 JQGrid 的刷新按钮单击上编写代码。有什么事件吗？最佳答案如果您需要在开始刷新之前执行一些操作，您应该使用 beforeRefresh打回来: $("#grid_id").jqGrid
angular - 传入多个参数或对象(单击)
问题是将对象或多个参数从模板传递到组件，并使用它们将数据添加到 API。任务.service.ts addTasks(task: Task): Observable{ let headers =
单击“primefaces”选项卡
我有一个像这样的primefaces选项卡 View : This tab has static content. this t
jQuery - anchor 单击
我在 jquery 中有一个有效的 a.click() 函数...但是如果我单击一个 anchor ，我会打开一个新窗口...但是我怎样才能阻止浏览器本身打开一个新窗口？示例: $('a')
jquery - 单击 - 导航前延迟
有没有简单的方法来创建代码:如果 URL 更改或单击链接显示 div(例如加载 gif 3 秒)，则显示页面？有点像空白的白色页面，加载 gif 旋转 3 秒然后显示页面？谢谢! 最佳答案给定 G
iphone - 如何检查按钮是否仍然按下(单击)？
我需要知道此时按钮的状态是否被点击？谢谢最佳答案 if (myButton.state & UIControlStateHighlighted) { // Do your stuff the
macos - 单击 NSBezierPath
我正在 NSImageView 上绘制一条 NSBezierPath 线。我正在创建 NSBezierPath 对象，设置 moveToPoint，设置 lineToPoint，设置 setLineW
selenium - 如何使用selenium按下+单击
我的 Selenium 代码存在问题，无法正确执行按键 + 单击操作。测试应打开 jqueryui.com 链接并选择页面上的前 2 个 li 元素。我正在使用 Selenium 2.23 和 F
javascript - 单击 # 链接时无需滚动到页面顶部
我在页面

javascript - 单击:Reactjs时如何更改部分字符串的样式
单击时我将更改字符串一部分的样式。例如“TEXT”，然后单击“T”，之后它会将样式从黑色更改为红色，仅 T在我的代码中，当我单击文本时，我拆分文本并保留在“split”数组中，它将调用handleCl
javascript - 单击“选择器更改后不触发”
我在网站上有一个 anchor 。当有人点击它时，我在 jquery 中执行一些操作并更改名称，但是当再次单击它时，事件被触发，尽管我已经更改了它的名称。代码在这里: $(".like_cont a[
php - 单击 href链接后如何插入数据库？
我有一个下载链接Download我希望每次当有人点击“下载”时，我都可以将其插入数据库total_downloads+1。为了插入数据库，我通常使用然后 if (isset($_POST['d

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 HTML/CSS/javascript 中，单击鼠标并将鼠标悬停在子选项卡内的选项卡上时，代码无法按预期工作