0

我为我的一个朋友整理了一个快速网站，我基本上只是使用查询滑块来管理所有内容，但是当访问者点击播放他的一首歌曲时，它似乎也触发了导航（由 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>
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 回答