文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在HTML/CSS/javascript中，当单击并在子选项卡内的选项卡上悬停鼠标时，代码不能按预期工作。

问在HTML/CSS/javascript中，当单击并在子选项卡内的选项卡上悬停鼠标时，代码不能按预期工作。
EN

Stack Overflow用户
提问于 2018-02-04 10:57:33
回答 1查看 264关注 0票数 0

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

请先执行代码片段：

所以，现在发生了什么:当您在"Tabs“上悬停鼠标时，将显示3个选项卡。然后单击每个选项卡将显示其边选项卡“以粗体”和其各自的第一行的文本数据，而不会在边框上悬停鼠标。

问题:当你开始在边框上悬停鼠标时，它就会出现故障.它将显示其各自的数据，但当您单击第一次加载时，将停止在其他选项卡中显示第一行数据及其文本内容。当你把鼠标悬停在旁边的标签上时，你可以好好休息一下。

我想要的:因此，基本上每当我单击选项卡时，从顶部以“粗体”显示的边标签数据的第一行/列以及其各自的内容文本都应该是可见的。

我可能无法更好地解释，请运行代码片段来理解我想说的话。

​

代码语言：javascript
运行
复制
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";
}
代码语言：javascript
运行
复制
.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;
代码语言：javascript
运行
复制
<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>

​

tabs
javascript
jquery
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-04 11:54:26

当sidemenu函数更改所有sidetabcontent项的样式以隐藏它们时，将不会再次插入显示样式，直到mouseover事件再次触发sidemenu函数。

要确保选项卡菜单函数显示第一项，您必须再次设置css & class，您可以添加：

代码语言：javascript
运行
复制
document.getElementById(tabname).children[1].style.display = 'block';
document.getElementById(tabname).children[0].children[0].className += " active";

您将需要更改sidetablink的标记，以便它们在用户选择选项卡之前不再是活动的：

代码语言：javascript
运行
复制
<button class="sidetablinks" onmouseover="sidemenu(event, 'st1')">Side Tab1</button>

完整代码：

​

代码语言：javascript
运行
复制
            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";
            }
代码语言：javascript
运行
复制
.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;
代码语言：javascript
运行
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48607342

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档