[英]on hover show the other div
我在這里遇到一種情況,我想顯示一些懸停數據,我不知道如何使用javascript
這是代碼
$(document).ready(function(){ $("#nav li.active-class").hover(function(){ $(".nav-hide").addClass('show-nav'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="about-us.html">About Us</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row navigation"> <div class="container"> <li> <div class="col-sm-4"> <div class="left-area"> <button type="button" class="btn all-product-btn">All Products</button> <hr> <ul id="nav"> <li class="active-class"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li> <li><a href="hospital-management-software/index.html">Hospital Management Software</a></li> <li><a href="school-management-system/index.html">School Management System</a></li> <li><a href="inventory-management-software/index.html">Inventory Management Software</a></li> <li><a href="fee-management-system.html">Fee Management System</a></li> <li><a href="lead-management-system/index.html">Lead Management System</a></li> <li><a href="customer-relationship-management.html">Customer Relationship Management</a></li> <li><a href="human-resource-management-software.html">Human Resource Management Software</a></li> <li><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li> <li><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li> </ul> </div> </div> <div class="col-sm-8 nav-hide show-nav"> <div class="right-area"> <h3>Employee Monitoring System</h3> <p></p> <div class="col-md-7"> <ul> <li>A Unique System that peforms employee monitoring.</li> <li>Prevents unauthorised exchange of data</li> <li>Could not be identified by a user</li> <li>Captures their Keystrokes</li> <li>Caputres their Screen Shots</li> <li>Uploads text files</li> </ul> </div> <div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div> </div> </div> </li> <div class="col-sm-8 nav-hide"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> <div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div> </div> </div> </ul> </div>
現在我想如果懸停
<li><a href="hospital-management-software/index.html">Hospital Management Software</a></li>
如果完成了懸停或鼠標懸停,則它必須顯示與醫院管理軟件有關的數據,即懸停時應顯示此數據
<div class="col-sm-8 nav-hide">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>
我試過使用javascript,但懸停時沒有運氣,它不會顯示,而是繼續顯示活動類的數據
<script>
$(document).ready(function(){
$("#nav li.active-class").hover(function(){
$(".nav-hide").addClass('show-nav');
});
});
</script>
請幫幫我
您可以使用mouseover和mouseleave函數(第一個錨點)或懸停功能(第二個錨點)。 您需要向您的目標添加類或id並添加jquery庫。
$("#hosp_man").mouseover( function(){ $("#hidden_div").fadeIn(100) }); $("#hosp_man").mouseleave( function(){ $("#hidden_div").fadeOut(100) }); $('#hosp_man2').hover(function(e){ $("#hidden_div").fadeIn(100) }, function(){ $("#hidden_div").fadeOut(100) });
#hidden_div{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="hosp_man" href="hospital-management-software/index.html">Hospital Management Software</a> <br> <a id="hosp_man2" href="hospital-management-software/index.html">Hospital Management Software</a> <div class="col-sm-8" id="hidden_div"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> </div> </div>
有多種方法可以實現此目的,而以下是一種簡便的方法。
步驟1:如下更新您的JavaScript代碼
<script>
$(document).ready(function(){
$("#nav li").hover(function(){
var datatoShow = $(this).attr('data');
$("#"+datatoShow).toggle();
});
});
</script>
步驟2:如下更新HTML代碼部分
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row navigation">
<div class="container">
<li>
<div class="col-sm-4">
<div class="left-area">
<button type="button" class="btn all-product-btn">All Products</button>
<hr>
<ul id="nav">
<li class="active-class" data="Employee"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li>
<li data="Hospital"><a href="hospital-management-software/index.html" >Hospital Management Software</a></li>
<li data="School"><a href="school-management-system/index.html">School Management System</a></li>
<li data="Inventory"><a href="inventory-management-software/index.html">Inventory Management Software</a></li>
<li data="Fee"><a href="fee-management-system.html">Fee Management System</a></li>
<li data="Lead"><a href="lead-management-system/index.html">Lead Management System</a></li>
<li data="Customer"><a href="customer-relationship-management.html">Customer Relationship Management</a></li>
<li data="Human"><a href="human-resource-management-software.html">Human Resource Management Software</a></li>
<li data="Enterprises"><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li>
<li data="Commerce"><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li>
</ul>
</div>
</div>
<div id="Employee" class="col-sm-8 active-class" style="display:none">
<div class="right-area">
<h3>Employee Monitoring System</h3>
<p></p>
<div class="col-md-7">
<ul>
<li>A Unique System that peforms employee monitoring.</li>
<li>Prevents unauthorised exchange of data</li>
<li>Could not be identified by a user</li>
<li>Captures their Keystrokes</li>
<li>Caputres their Screen Shots</li>
<li>Uploads text files</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div>
</div>
</div>
</li>
<div id="Hospital" class="col-sm-8 nav-hide" style="display:none">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>
</ul>
</div>
要默認顯示“員工監控系統”:
在代碼中進行以下更改:
步驟1:更新javascript代碼部分:
<script>
$(document).ready(function(){
$("#nav li").hover(function(){
$("#Employee").hide();
var datatoShow = $(this).attr('data');
$("#"+datatoShow).toggle();
});
});
</script>
步驟2:如下更新HTML代碼:
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row navigation">
<div class="container">
<li>
<div class="col-sm-4">
<div class="left-area">
<button type="button" class="btn all-product-btn">All Products</button>
<hr>
<ul id="nav">
<li class="active-class" data="Employee"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li>
<li data="Hospital"><a href="hospital-management-software/index.html" >Hospital Management Software</a></li>
<li data="School"><a href="school-management-system/index.html">School Management System</a></li>
<li data="Inventory"><a href="inventory-management-software/index.html">Inventory Management Software</a></li>
<li data="Fee"><a href="fee-management-system.html">Fee Management System</a></li>
<li data="Lead"><a href="lead-management-system/index.html">Lead Management System</a></li>
<li data="Customer"><a href="customer-relationship-management.html">Customer Relationship Management</a></li>
<li data="Human"><a href="human-resource-management-software.html">Human Resource Management Software</a></li>
<li data="Enterprises"><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li>
<li data="Commerce"><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li>
</ul>
</div>
</div>
<div id="Employee" class="col-sm-8 nav-hide" >
<div class="right-area">
<h3>Employee Monitoring System</h3>
<p></p>
<div class="col-md-7">
<ul>
<li>A Unique System that peforms employee monitoring.</li>
<li>Prevents unauthorised exchange of data</li>
<li>Could not be identified by a user</li>
<li>Captures their Keystrokes</li>
<li>Caputres their Screen Shots</li>
<li>Uploads text files</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div>
</div>
</div>
</li>
<div id="Hospital" class="col-sm-8 nav-hide" style="display:none">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>
</ul>
</div>
對您的代碼進行了調整。希望對您有所幫助:)
$(document).ready(function(){ $("#nav li").hover(function(){ var abc = $(this).data('open'); $('.'+abc).removeClass('hide'); }, function() { $('.detailed_div').addClass('hide'); }); });
<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/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="about-us.html">About Us</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row navigation"> <div class="container"> <li> <div class="col-sm-4"> <div class="left-area"> <button type="button" class="btn all-product-btn">All Products</button> <hr> <ul id="nav"> <li class="active-class" data-open="emp-monitoring"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li> <li data-open="hosp-management"><a href="hospital-management-software/index.html">Hospital Management Software</a></li> <li><a href="school-management-system/index.html">School Management System</a></li> <li><a href="inventory-management-software/index.html">Inventory Management Software</a></li> <li><a href="fee-management-system.html">Fee Management System</a></li> <li><a href="lead-management-system/index.html">Lead Management System</a></li> <li><a href="customer-relationship-management.html">Customer Relationship Management</a></li> <li><a href="human-resource-management-software.html">Human Resource Management Software</a></li> <li><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li> <li><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li> </ul> </div> </div> </li> <div class="emp-monitoring detailed_div col-sm-8 nav-hide hide"> <div class="right-area"> <h3>Employee Monitoring System</h3> <p></p> <div class="col-md-7"> <ul> <li>A Unique System that peforms employee monitoring.</li> <li>Prevents unauthorised exchange of data</li> <li>Could not be identified by a user</li> <li>Captures their Keystrokes</li> <li>Caputres their Screen Shots</li> <li>Uploads text files</li> </ul> </div> <div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div> </div> </div> <div class="hosp-management detailed_div col-sm-8 nav-hide hide"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> <div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div> </div> </div> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.