Question

我为我的一个朋友组建了一个快速网站，我基本上只使用了查询滑块来管理所有内容，但是当访问者点击其中一首歌时，它似乎也会触发导航（由onClick触发）。问题是播放音乐也参与了滑块，我还不够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>

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

Answer 2

event.preventDefault（）可以解决您的问题。只是阻止按钮的默认行为，让js触发正确的事件。

Javascript onClick会触发两个事件

2 个答案: