Question

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

我的导航按钮出现问题：Play，About，How To。

如果点击“关于”，那么'如何'一切正常，但如果你从'如何'变为'约'，'怎么样'就会消失。如何使所有按钮始终如一地工作而不是消失。此外，我注意到幻灯片过渡是有趣的，有时显示白色横幅。

我希望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>

Answer 1

必须同意米切尔的观点。像这样使用图像进行简单导航非常非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获得所需的效果。

jQuery滑入和滑出表现奇怪，按钮消失

1 个答案: