Question

首先让我说，从可访问性的角度来看，我认识到这不是最好的主意，但功能并不取决于我决定：）

我希望一次可以看到一个“内容框”（共有三个） - 当前显示的哪个框将由哪个相应的链接悬停决定（并且框1将显示在在任何悬停操作之前加载页面。）

如果我们想象我有以下HTML：

<ul>
    <li id="link-one">Link One</li>
    <li id="link-two">Link Two</li>
    <li id="link-three">Link Three</li>
</ul>

<div id="box-one">Content for box one.</div>
<div id="box-two">Content for box two.</div>
<div id="box-three">Content for box three.</div>

我希望＃box-one默认显示。然后，如果＃link-two或#link-3悬停在上面，那么＃box-two或＃box-three会相应显示。

如果转移过程中出现淡入淡出的动画，那就太棒了。

这是我正在接近这一点的思路 - 我意识到这不是有效的jQuery语法，但是如果有人能帮助我把它变成真实的东西我会非常感激它！

if ($(#link-one).mouseenter(function() {
    $(#box-one).show();
    $(#box-two).hide();
    $(#box-three).hide();
});)

if ($(#link-two).mouseenter(function() {
    $(#box-two).show();
    $(#box-one).hide();
    $(#box-three).hide();
});)

if ($(#link-three).mouseenter(function() {
    $(#box-three).show();
    $(#box-one).hide();
    $(#box-two).hide();
});)

自我批评：添加新的链接/框组合后，我的代码无法很好地扩展。这似乎效率很低，但我不确定如何实现这一目标。当要显示新的盒子时，可能有更好的方法来实现淡入/淡出传输。非常感谢任何想法。

谢谢！

Answer 1

将div id或类放在锚

中

<a href="#" rel="divName">...</a>

将单击处理程序或悬停或鼠标中心（无论如何）绑定到锚点，如果需要，可以添加一个类，然后只需抓住该divName即可显示它。隐藏所有内容并显示该内容。你可以用li

做同样的事情

像

这样的东西

$('.className').bind('mouseenter', function() {
    //grab the rel attribute
    var divName = $(this).attr('rel');
    // hide all boxes

    // show the right box
    $('#' + divName).show();
});

隐藏我会将你的盒子分成一个div，以便你可以更好地定位它

基于悬停在相应链路集合上交换不同的输入/输出

1 个答案: