0

私は友人のために簡単な Web サイトを作成しました。基本的にはクエリ スライダーを使用してすべてのコンテンツを管理しましたが、訪問者が自分の曲の 1 つをクリックして再生すると、ナビゲーションが起動するようです (onClick によってトリガーされます)。 ）。問題は、音楽を再生するとスライダーも連動することです.2つのイベントを分離する方法を理解するには、javascript/jqueryがまだ十分ではありません. どんな助けでも大歓迎です。

<script>

function goto(id, t){   
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);

// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');

// add active class to the current link
$(t).addClass('active');    
}


</head>

<body>

    <div id="wrap">

    <div id="header">
            <img src="images/header.gif" width="320" height="59">


      </div>

    <div id="content">
    <div id="nav">
        <ul>
            <li ><a class="active" href="#" onClick="goto('#about', this); return false"><img src="images/bioblack.gif" width="93" height="55"></a></li>
            <li><a href="#" onClick="goto('#work', this); return false"><img src="images/soundblack.gif" width="146" height="55"></li>
            <li><a href="#" onClick="goto('#contact', this); return false"><img src="images/contactblack.gif" width="183" height="54"></li>
        </ul>
    </div>

        <div class="contentbox-wrapper">

            <div id="about" class="contentbox">


            <img src="images/bio.gif" width="549" height="270">
          </div>

            <div id="work" class="contentbox">



            <img src="images/slowlane.gif" width="165" height="38">


            <embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed> 

            <img src="images/speedlimit.gif" width="169" height="39">
            <embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>

            <img src="images/fastlane.gif" width="169" height="37">
            <embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed> 

              </div>

            <div id="contact" class="contentbox">

            <img src="images/contact.gif" width="422" height="188"></div>

        </div>          

    </div>
4

2 に答える 2

1

あなたの HTML には閉じられていないタグがたくさんあります。固定されてインデントされた HTML で試してください:

<body>
    <div id="wrap">
        <div id="header">
            <img src="images/header.gif" width="320" height="59">
        </div>

        <div id="content">
            <div id="nav">
                <ul>
                    <li>
                        <a href="#" onClick="goto('#about', this); return false" class="active">
                            <img src="images/bioblack.gif" width="93" height="55">
                        </a>
                    </li>
                    <li>
                        <a href="#" onClick="goto('#work', this); return false">
                            <img src="images/soundblack.gif" width="146" height="55">
                        </a>
                    </li>
                    <li>
                        <a href="#" onClick="goto('#contact', this); return false">
                            <img src="images/contactblack.gif" width="183" height="54">
                        </a>
                    </li>
                </ul>
            </div>

            <div class="contentbox-wrapper">

                <div id="about" class="contentbox">
                    <img src="images/bio.gif" width="549" height="270">
                </div>

                <div id="work" class="contentbox">
                    <img src="images/slowlane.gif" width="165" height="38">
                    <embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed> 

                    <img src="images/speedlimit.gif" width="169" height="39">
                    <embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>

                    <img src="images/fastlane.gif" width="169" height="37">
                    <embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed> 
                </div>

                <div id="contact" class="contentbox">
                    <img src="images/contact.gif" width="422" height="188"></div>
                </div>
            </div>
        </div>
    </div>
</body>
于 2012-11-02T17:58:22.767 に答える
0

event.preventDefault() で問題を解決できます。ボタンのデフォルトの動作を防ぎ、js に正しいイベントを発生させるだけです。

于 2012-11-02T17:54:30.107 に答える