当鼠标进入/悬停到链接并显示特定DIV时，隐藏DIV的所有sibilings

I have separated buttons and DIV's representing each button. I need to show only the particular DIV when hover or mouse enter on it's corresponding button. The code is shown below,

我有分开的按钮和代表每个按钮的DIV。当悬停或鼠标进入相应的按钮时,我只需要显示特定的DIV。代码如下所示,

  <ul class="icon-list">
    <li><a href="#" id="btn-ftr-5"><div class="circle"><i class="fa fa-user fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-4"><div class="circle"><i class="fa fa-tasks fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-3"><div class="circle"><i class="fa fa-gift fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-2"><div class="circle"><i class="fa fa-music fa-3"></i></div></a></li>
   </ul>

And the DIVs is below,

DIV在下面,

<div class="row feature-content-original" id="ftr-1">
  <div class="col-md-5 feature-title" id="#title-ftr">
    <h2>Event Details</h2>
  </div>
  <div class="col-md-7 feature-info">
    <p>Welcome to your NuEvents Snapshot page.
       From your event management snapshot page, you can get a quick overview of al
      l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
       From your Snapshot page you can create a new task, memo, or appointment with ease.</p>
  </div>
</div>

<div class="row feature-content hidden" id="ftr-2">
  <div class="col-md-5 feature-title" id="#title-ftr">
      <h2>Food And Drinks</h2>
  </div>
  <div class="col-md-7 feature-info">
    <p>From your event management snapshot page, you can get a quick overview of al
   l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
    From your Snapshot page you can create a new task, memo,
    your RSVP/Food/Drink/Song activity in real time.
     From your Snapshot page you can create a new task, memor appointment with ease.</p>
  </div>
</div> <!--etc -->

And I have 2 classes for DIVs to show and hide as 'showftr' and 'hidden'

我有2个DIV课程可以显示和隐藏为'showftr'和'hidden'

The following code is not working. I need your help to get a result.

以下代码无效。我需要你的帮助才能得到结果。

<script>
$(document).ready(function() {
 $('#btn-ftr-2').mouseenter(function() {
 $('#ftr-2').addClass('showftr');
}, function() {
 $('#ftr-2').removeClass('hidden');
}, function(){
 $('#ftr-2').sibilings().addClass('hidden');
}
});

});
</script>

3 个解决方案

#1

You want something like that?

你想要那样的东西吗?

DEMO : http://jsfiddle.net/yeyene/Lyadfdgf/1/

Use the same button's id and div's class to be shown/hidden. You can get show/hide funtion with the jquery script alone.

使用相同按钮的id和div的类来显示/隐藏。您可以单独使用jquery脚本获得show / hide功能。

JQUERY

$(document).ready(function () {
    $('.feature-content').hide(0);
    $('.feature-content').eq(0).show(0);

    $('.icon-list li a').on('mouseover', function () {
        $('.feature-content').hide(0);
        var get_id = $(this).attr('id');
        $('.feature-content.'+get_id).show(0);
    });
});

HTML

<ul class="icon-list">
    <li>
        <a href="#" id="div-ftr-5"><div class="circle"><i class="fa fa-user fa-3"></i> Event Detail</div></a>
    </li>
    <!-- ... -->
</ul>
<div class="row feature-content div-ftr-5">
    <div class="col-md-5 feature-title" id="#title-ftr">
         <h2>Event Details</h2>
    </div>
    <div class="col-md-7 feature-info">
        <p>Welcome to your NuEvents Snapshot page. From your event management snapshot page, you can get a quick overview of al l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time. From your Snapshot page you can create a new task, memo, or appointment with ease.</p>
    </div>
</div>
<!--etc -->

#2

Here is my attempt, if I understood it correctly:

如果我理解正确的话,这是我的尝试:

$('a[id^=btn-ftr-]').hover(function() {
    var id = $(this).attr('id');
    id = id.substr(id.lastIndexOf('-') + 1, id.length);
    $('div[id^=ftr-]').removeClass('showftr').addClass('hidden');
    $('div[id=ftr-' + id + ']').removeClass('hidden').addClass('showftr');
}, function() {
    $('div[id^=ftr-]').removeClass('hidden').addClass('showftr');
});

#3

Since you have a repeated structure, you can simplify your code by adding additional common classes to the elements

由于您具有重复的结构,因此可以通过向元素添加其他公共类来简化代码

A class btn-ftr is added to all buttons where as a class ftr is added to all the div's.

类btn-ftr被添加到所有按钮,其中类ftr被添加到所有div。

jQuery(function($) {
  var $contents = $('.ftr')
  $('.btn-ftr').hover(function() {
    var tid = this.id.replace('btn-', ''),
      $target = $('#' + tid);
    $contents.not($target).addClass('hidden');
    $target.addClass('showftr').removeClass('hidden');
  }, function() {
    $contents.filter('.hidden').removeClass('hidden');
    var tid = this.id.replace('btn-', '');
    $('#' + tid).removeClass('showftr');
  })

})

    .hidden {
      display: none;
    }

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<ul class="icon-list">
    <li><a href="#" id="btn-ftr-1" class="btn-ftr"><div class="circle"><i class="fa fa-user fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-2" class="btn-ftr"><div class="circle"><i class="fa fa-tasks fa-3"></i></div></a></li>
</ul>

<div class="row feature-content-original ftr" id="ftr-1">
    <div class="col-md-5 feature-title" id="#title-ftr">
        <h2>Event Details</h2>
    </div>
    <div class="col-md-7 feature-info">
        <p>Welcome to your NuEvents Snapshot page.
            From your event management snapshot page, you can get a quick overview of al
            l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
            From your Snapshot page you can create a new task, memo, or appointment with ease.</p>
    </div>
</div>

<div class="row feature-content hidden ftr" id="ftr-2">
    <div class="col-md-5 feature-title" id="#title-ftr">
        <h2>Food And Drinks</h2>
    </div>
    <div class="col-md-7 feature-info">
        <p>From your event management snapshot page, you can get a quick overview of al
            l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
            From your Snapshot page you can create a new task, memo,
            your RSVP/Food/Drink/Song activity in real time.
            From your Snapshot page you can create a new task, memor appointment with ease.</p>
    </div>
</div> <!--etc -->