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

标签 javascript jquery html css tabs

我在 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/

上一篇：html - css 网格布局静态响应列和行

下一篇：javascript - 如何使用 .removeChild() 删除具有不同 ID 的多个子元素？

相关文章：

jquery - 合并 Twitter Bootstrap 组件 : Dropdown and Accordion

jquery - Angular JS : temporary disable animation provided by directive so it doesn't animate when the page load?

javascript - 上传文件时将文件名应用于标签

javascript - 我们可以使用 moment.insert 方法在您的 g+ 墙上发布/发布一些内容吗？

JQuery Flotcharts 折线图 - 突出显示特定系列

javascript - 在 onClick() 方法中切换元素的可见性

javascript - 如何仅当用户在 div 上滚动时显示滚动条

python - 在 Python 中使用 Flask 发送 html 电子邮件

javascript - API:使构造函数在 JavaScript 中无需括号即可链接

javascript - || 是什么意思在javascript中？

©2024 IT工具网  联系我们