Question

下面的代码就是我所拥有的，但遗憾的是它没有做任何事情。以前我有一个部分工作交换图像，但它更简单的代码......如果有一个更简单的方法来做到这一点我都是耳朵。

回顾一下我想要完成的事情是：

登陆主页＆gt;导航中未选择任何内容将鼠标悬停在 - 图像交换到选定状态点击图片交换到选定状态。

感谢您的帮助！

我遇到的另一个问题是艺术家给出的文件在图像中有文字。我有两个不同的图像，一个处于选定状态，一个处于文本状态，另一个处于处于非活动状态的文本。所以我不能把文字放在上面。

Jquery的

var menu = {
init: function () {

    $('.nav-image').hover(function () {
        if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") == -1) {
            var src = $(this).attr('src').replace("_off.png", "_on.png");
            $(this).attr('src', src);
        }
    },

        function () {

            if ((page == "index" && $(this).attr('id') != "index-nav") || (page == "about" && $(this).attr('id') != "about-nav") || (page == "portfolio" && $(this).attr('id') != "portfolio-nav") || (page == "blog" && $(this).attr('id') != "blog-nav") || (page == "contact" && $(this).attr('id') != "contact-nav") || page == "index") {
                if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") >= 0) {
                    var src = $(this).attr('src').replace("_on.png", "_off.png");
                    $(this).attr('src', src);
                }
            }
        });

}}

HTML

<div class="menu">
    <div style="float: left; hieght: 45px; width: 193px;"><img src="images/nav/left_end.png" class="nav-image"></div>
    <div style="float: left; height: 45px; width: 73px;"><a href="index.php"><img src="images/nav/home_off.png" class="nav-image" id="index-nav"></a></div>
    <div style="float: left; height: 45px; width: 80px;"><a href="about.php"><img src="images/nav/about_off.png" class="nav-image" id="about-nav"></a></div>
    <div style="float: left; height: 45px; width: 112px;"><a href="portfolio.php"><img src="images/nav/portfolio_off.png" class="nav-image" id="portfolio-nav"></a></div>
    <div style="float: left; height: 45px; width: 69px;"><a href="http://info.arkmediainc.com/blog"><img src="images/nav/blog_off.png" class="nav-image" id="blog-nav"></a></div>
    <div style="float: left; height: 45px; width: 98px;"><a href="http://info.arkmediainc.com/contact-us"><img src="images/nav/contact_off.png" class="nav-image" id="contact-nav"></a></div>
    <div style="float: left; height: 45px; width: 35px;"><img src="images/nav/right_end.png"></div>
</div>

Answer 1

你可以让CSS为你做。

每个div都可以是任何菜单项的背景图片，也可以让你有文字。

然后使用类似于this sample的代码。

因此，您可以为每个链接提供更清晰的代码：

<div class="nav home"><a href="index.php">Home</a></div>

<script>
jQuery('.nav').click(function() {
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked");
});
<script>

<style>
.nav {
    float: left; 
    height: 45px; 
    width: 73px;;
}

.home {
    background-image: url("images/nav/home_off.png");
    }

.home:hover {
    background-image: url("images/nav/home_on.png");
    }

</style>

Answer 2

我认为如果将css中的图像作为背景图像放到2个类中，然后只需在元素上切换类就会更容易。

通过JQuery导航Active / Hover / Inactive状态

2 个答案: