当用户将光标移回处理程序元素时,我想阻止/停止滑动功能。
例如,如果您将鼠标悬停在Home
上,.tab-pane
将向下滑动,如果您将鼠标从.tab-pane
移至Home
标签,则会重新向下滑动内容。我需要检测鼠标是否来自关联的.tab-pane
什么都不做。
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$($(e.target).attr('href')).slideDown('slow');
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.tab-pane').hover(function(e) {}, function() {
$(this).slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>
答案 0 :(得分:1)
我只调整了脚本,请试试这个:
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$('.tab-pane.active:not(#'+target+')').hide(); // Hide the tab panel except the current target
$($(e.target).attr('href')).slideDown('slow').addClass('active'); // Add the class 'active' to the tab panel
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.container').hover(
function(e) {},
function(e) {
$('.tab-pane.active').slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
&#13;
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>
</div>
&#13;