0

首先让我说我意识到从可访问性的角度来看这不是最好的主意，但功能不是我来决定的:)

我希望一次有一个可见的“内容框”（总共三个） - 当前显示哪个框将取决于悬停在哪个相应链接上（并且框一将显示在页面加载之前任何悬停动作）。

如果我们想象我有以下 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-2 或 #link-three 悬停在上方，则 #box-2 或 #box-3 将相应显示。

如果在传输过程中有一个淡入淡出的动画，那就太好了。

这是我正在处理的思路——我意识到这不是有效的 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();
});)

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

谢谢！

4

1 回答 1

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 中，以便您可以更好地定位它

于 2012-06-20T17:38:29.080 回答