代码之家 › 专栏 › 技术社区 › Mona Coder

如何在bootstrap 3选项卡上应用hover?

twitter-bootstrap-3 jquery javascript

Mona Coder · 技术社区 · 7 年前

如何向此代码添加功能以保持 .tab-pane 当鼠标从 .tab 到 选项卡窗格 ?只有当鼠标悬停在 选项卡窗格 ?

$(".presentation").hover(function(){
  var target = $(this).data("target");
     $(target).addClass('in active');
    }, function(){
		 var target = $(this).data("target");
    $(target).removeClass('in active');
});

.tab-pane{
 background:#eee;
  height:120px;
  Padding:20px;
}

<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>

  <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a class="presentation" data-target="#home">Home</a></li>
    <li role="presentation"><a class="presentation" data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a class="presentation" data-target="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a class="presentation" data-target="#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 fade" id="home">Home</div>
    <div role="tabpanel" class="tab-pane fade" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane fade" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane fade" id="settings">settings</div>
  </div>

</div>
  </div>

1 回复 | 直到 6 年前

Revinand 7 年前

你可以使用 relatedTarget jquery的属性 eventObject 传递给的第二个处理程序 hover 事件:

$(".presentation").hover(
  function() {
    var target = $(this).data("target");
    $(target).addClass('in active');
  },
  function(event) {
    var target = $(this).data("target");
    var targetId = target.replace('#', '');       
    var relatedTarget = $(event.relatedTarget);

    if (relatedTarget.attr('id') === targetId) {
      return;
    }

    $(target).removeClass('in active');
  }
);

但你也需要捆绑 mouseleave 事件处理程序打开 .tab-pane 元素以便正确隐藏它们。

$('.tab-pane').on('mouseleave', function() {
  $(this).removeClass('in active');
})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

11 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前