0

このことは期待どおりに機能します。これがデモです。

<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>

テキスト (ABOUT、SUBSCRIBE、CONTACT) を画像に置き換えたいです。だから私はこれで試しましたが、うまくいきません..理由はわかりますか?:)

4

3 に答える 3