2

我正在制作一个模型并创建了这个： 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>
4

1 回答 1

0

在这一点上，我必须同意米切尔的意见。像这样使用图像进行简单导航是非常不友好的。不仅如此，这简直就是不专业。

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

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 获得所需的效果。

于 2013-10-15T07:08:47.730 回答