jQuery滑入和滑出行为奇怪，按钮消失

jQuery Slide in and out behaving odd, buttons disappearing

本文关键字：消失 按钮 jQuery      更新时间：2023-09-26

我正在制作一个模型并创建了这个：http://cynthialarenas.billybluedigital.net/

我的导航按钮有问题：播放、关于、操作方法。

如果您单击"关于"，那么"如何"

一切正常，但是如果您从"如何"转到"关于"，则"如何"消失。如何让所有按钮始终如一地工作而不会消失。此外，我注意到幻灯片切换有点有趣，有时会显示白色横幅。

我希望 jquery 就在内容区域内，但它似乎在页脚上方和上方快速闪烁。

谁能说出一些启示？

以下是我的代码片段：

.CSS：

#contentArea{
    width:1024px;
    height:522px;
    background:#FFF;
    float:left;
    overflow: hidden;
}
#playSlide, #howSlide, #aboutSlide {
    display: none
}
.toggleDiv p {
    margin: 0 0 12px 0
}

.HTML：

<div class="toggleDiv" id="aboutSlide">
    <div class="navContainer">
    <div class="menuItem">
        <a class="show_hide" rel="#playSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
        </a>
    </div>
    <div class="menuItem">
        <a class="show_hide" rel="#aboutSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
        </a>
    </div>
    <div class="menuItem">
        <a class="show_hide" rel="#howSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
        </a>
    </div>
</div>
将不得不

同意米切尔的观点。像这样使用图像进行简单导航是非常不友好的SEO的。不仅如此，这完全不专业。

虽然当我访问您的网站时，我无法导致问题发生，但我可以提供您正在使用的图像的替代方案。

http://jsfiddle.net/L2MVu/1

<ul class="nav">
    <li class="active"><a href="#">play</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">how to play</a></li>
</ul>

如您所见，这一切都是可编辑的，但仍然像您想要的图像一样干净。

虽然这对节省页面加载时间并没有多大作用，但在诉诸图像之前，最好尝试使用纯 CSS 获得所需的效果。

相关文章：