Javascript 用jQuery脚本中的图像替换文本

这玩意儿果然起作用了。”这是一个演示

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>

                <script>
                $(window).load(function() {
                      $('#about, #subscribe, #contact').hide();

                      $('.home').click(function() {
                        var id = $(this).html().toLowerCase();
                        var $content = $('#' + id + ':not(:visible)');
                        if ($('.current').length === 0) {
                            showContent($content)
                        }
                        else {
                            $('.current').fadeOut(600, function() {
                                showContent($content)
                            });
                        }
                    });

                    function showContent(content) {
                        content.fadeIn(600);
                        $('.current').removeClass('current');
                        content.addClass('current');
                    } 
                  });
                </script>

                    <div id="nav">
                        <a class="home" id="show_about" title="About">ABOUT</a><br />
                        <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br/>
                        <a class="home" id="show_contact" title="Contact">CONTACT</a>
                    </div>
                    <div id="content">
                        <div class="current" id="about">
                            <p>ABOUT's content</p>
                        </div>
                        <div id="subscribe">
                            <p>SUBSCRIBE's content</p>
                        </div>
                        <div id="contact">
                            <p>CONTACT's content</p> 
                        </div>
                    </div>

$（窗口）。加载（函数（）{
$（“#关于，#订阅，#联系”）.hide（）；
$（'.home'）。单击（函数（）{
var id=$（this.html（）.toLowerCase（）；
var$content=$（“#”+id+”：不（：可见）；
如果（$（'.current'）。长度===0）{
showContent（$content）
}
否则{
$（'.current'）.fadeOut（600，function（）{
showContent（$content）
});
}
});
函数showContent（content）{
内容：fadeIn（600）；
$（'.current'）.removeClass（'current'）；
content.addClass（“当前”）；
} 
});
，但它不起作用。。你知道为什么吗？：）
 尝试使用以下方法：

$('#about, #subscribe, #contact').hide();

$('.home').click(function () {
    var id = this.id.replace('show_', ''); // this line has been changed
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    } else {
        $('.current').fadeOut(600, function () {
            showContent($content)
        });
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}

当你点击一个链接时，它会获取链接的
id
，然后删除
show
，并显示带有该
id
的div。下面是一个例子：

用户单击顶部链接。
id
是
show\u about
。javascript删除
show
离开
about
，然后选择
$（“#about:not（：visible）”并将其淡入

它正在工作：
我在控制台中看到的第一个错误：

获取404（未找到）



您在上述行中缺少http:

<script>
                $(window).load(function() {
                      $('#about, #subscribe, #contact').hide();

                      $('.home').click(function() {
                        //var id = $(this).html().toLowerCase();
                        //var $content = $('#' + id + ':not(:visible)');
                        var $content = $('#' + $(this).attr('title').toLowerCase() + ':not(:visible)');  // changed Here..
                        if ($('.current').length === 0) {
                            showContent($content)
                        }
                        else {
                            $('.current').fadeOut(600, function() {
                                showContent($content)
                            });
                        }
                    });

                    function showContent(content) {
                        content.fadeIn(600);
                        $('.current').removeClass('current');
                        content.addClass('current');
                    } 
                  });
                </script>

$（窗口）。加载（函数（）{
$（“#关于，#订阅，#联系”）.hide（）；
$（'.home'）。单击（函数（）{
//var id=$（this.html（）.toLowerCase（）；
//var$content=$（“#”+id+”：不（：可见）；
var$content=$（'#'+$（this）.attr（'title'）.toLowerCase（）+'：not（：visible）；//在此处更改。。
如果（$（'.current'）。长度===0）{
showContent（$content）
}
否则{
$（'.current'）.fadeOut（600，function（）{
showContent（$content）
});
}
});
函数showContent（content）{
内容：fadeIn（600）；
$（'.current'）.removeClass（'current'）；
content.addClass（“当前”）；
} 
});

您正在将图像作为内容获取

您必须改为获取Title属性

<script>
                $(window).load(function() {
                      $('#about, #subscribe, #contact').hide();

                      $('.home').click(function() {
                        //var id = $(this).html().toLowerCase();
                        //var $content = $('#' + id + ':not(:visible)');
                        var $content = $('#' + $(this).attr('title').toLowerCase() + ':not(:visible)');  // changed Here..
                        if ($('.current').length === 0) {
                            showContent($content)
                        }
                        else {
                            $('.current').fadeOut(600, function() {
                                showContent($content)
                            });
                        }
                    });

                    function showContent(content) {
                        content.fadeIn(600);
                        $('.current').removeClass('current');
                        content.addClass('current');
                    } 
                  });
                </script>