Question

我有一组链接：

<p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br>
  4 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a><br>
  3 Bedroom X 2.5 Baths</p>
<p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a><br>
  3 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a><br>
  4 Bedroom x 3.5 Bathrooms</p>

等...

我想基于悬停或鼠标悬停链接来显示/隐藏div内容。 div内容保持不变，直到另一个链接悬停。

以下是显示/隐藏的div内容示例：

<div style="display:none">
<div id="king">
<h2>King</h2>
<p>KingText</p>
</div>
</div>

<div style="display:none">
<div id="wood">
<h2>Wood</h2>
<p>Wood Text</p>
</div>
</div>

<div style="display:none">
<div id="ash">
<h2>The Ash</h2>
<p>The Ash Text</p>
</div>
</div>

<div style="display:none">
<div id="well">
<h2>The Well</h2>
<p>The Well Text</p>
</div>
</div>

到目前为止，这是我的jquery：

$(function() {
  $(".floorplan").hover(function() {
    var data_id = $(this).data('id');

  });
});

请注意，html中标记为“initial”的类我默认情况下会在页面加载时显示 - 然后它也可以在悬停在其他人上时隐藏。

寻找最简单优雅的解决方案，谢谢！

Answer 1

这就是我要做的事情：

HTML

<p><a href="#" class="floorplan" data-id="king"><strong>King</strong></a>

    <br>4 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a>

    <br>3 Bedroom X 2.5 Baths</p>
<p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a>

    <br>3 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a>

    <br>4 Bedroom x 3.5 Bathrooms</p>

<div class="floorplan-details initial" id="king">
     <h2>King</h2>
    <p>KingText</p>
</div>

<div class="floorplan-details" id="wood">
     <h2>Wood</h2>
    <p>Wood Text</p>
</div>

<div class="floorplan-details" id="ash">
     <h2>The Ash</h2>
    <p>The Ash Text</p>
</div>

<div class="floorplan-details" id="well">
     <h2>The Well</h2>
    <p>The Well Text</p>
</div>

CSS

.floorplan-details:not(.initial) {
    display: none;
}

jQuery on ready function

$(".floorplan").hover(function () {
    var data_id = $(this).data('id');

    // Shows the hovered floorplan, hides others
    $('.floorplan-details').each(function() {
        var el = $(this);

        if(el.attr('id') == data_id)
            el.show();
        else
            el.hide();
    });
});

注意我将initial类移到了div。 css选择器匹配任何具有类floorplan-details且不具有类initial的div。这似乎是一种更优雅的方式来显示页面加载时的初始平面布局。

jsFiddle：http://jsfiddle.net/voveson/oxdg3bwf/1/

Answer 2

我会稍微简化一下HTML，以便更容易理解。

<div id="anchors">
    <a href="#" data-id="a" class="floorplan initial">a</a>
    <a href="#" data-id="b" class="floorplan">b</a>
    <a href="#" data-id="c" class="floorplan">c</a>
</div>

<div id="contents">
    <div id="a" style="display: none;">content a</div>
    <div id="b" style="display: none;">content b</div>
    <div id="c" style="display: none;">content c</div>
</div>

我的建议是直接在内容display: none上使用div，然后使用以下Javascript：

$(function() {
    $('a.floorplan').hover(function() {
        $('#contents div').hide();
        var divId = $(this).data('id');
        $('#' + divId).show();
    });

    $('a.floorplan.initial').trigger('mouseenter');    
});

trigger()方法允许您模拟事件并重用已为链接设置的逻辑。

Answer 3

虽然我会以不同的方式构建html，但如果我们使用你的确切html，我会这样做：

tabindex=0

基于显示初始div的链接的数据属性，在鼠标悬停时显示/隐藏div内容

3 个答案:

HTML

CSS

jQuery on ready function