2

我正在尝试通过 id 在网页上导航到 div 标签，而页面不会自动滚动到 div。这是我所拥有的：

<a id="submission" href='#Home' class="bannerLink">Home</a>

我有一个 jQuery 脚本：behaviour.js在 HTML 文件的头部导入，出现警告框，所以我知道它进入了函数。

在这个脚本中，我有：

$(function(){
    $("#submission").on("click", function(event){
        alert('HI');
        event.preventDefault();
        submitComment();
    });
});

我已经向 HTML 源添加了一个 onClick 事件，命名了一个要执行的特定函数，因为我已经在其中放置了一个警报，但是event.preventDefault();没有触发。

这是HTML：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="refineslide/refineslide.css"/>
    <link rel="stylesheet" href="refineslide/refineslide-theme-dark.css" />
    <link rel="stylesheet" href="reveal/reveal.css">
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="behaviour.js"></script>


    <!--
        *
        * ANIMTED BUTTNONS SRC HERE
        * NOT BY ME
        *
    -->

    <link rel="stylesheet" href="animatedbuttons/buttons.css">

    <!--
        *
        * KWICKS SRC HERE
        * NOT BY ME
        *
    -->

    <link rel='stylesheet' type='text/css' href="kwicks/jquery.kwicks.css" />
        <style type='text/css'>
            .kwicks {
                width: 515px;
                height: 100px;
            }
            .kwicks > li {
                width: 125px;
                height: 100px;
                /* overridden by kwicks but good for when JavaScript is disabled */
                margin-left: 5px;
                float: left;
            }
        </style>

    <!-- Including the Lobster, Arvo, Allan & PT Sans fonts from Google's Font Directory -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Allan:bold' />


</head>

<body>

    <!-- START BANNER DIV -->

    <div class="divBanner">

            <a href="updatelog/index.php" class="bannerLink">Update Log!</a>
            <a id="submission" href='#Home' onClick="test();" class="bannerLink">Home</a>

    </div>

    <!-- END BANNER DIV -->

    <!-- START Center page container -->
    <div class="divCenter">

        <!-- KWICKS SET -->
        <div class="kwicksOutsideContainer">
            <div class="kwicksInsideContainer nudge">
                <ul class='kwicks kwicks-horizontal'>
                        <li id='panel-1'>
                            <div class="outerPanelDiv">
                                <div class="innerPanelDiv">
                                    <a href='#Events' class="menuLink">Events</a>
                                </div>
                            </div>
                        </li>
                        <li id='panel-2'>
                            <div class="outerPanelDiv">
                                <div class="innerPanelDiv">
                                    <a href='#Committee' class="menuLink">Committee</a>
                                </div>
                            </div>
                        </li>
                        <li id='panel-3'>
                            <div class="outerPanelDiv">
                                <div class="innerPanelDiv">
                                    <a href='#Sponsors' class="menuLink">Sponsors</a>
                                </div>
                            </div>
                        </li>
                        <li id='panel-4'>
                            <div class="outerPanelDiv">
                                <div class="innerPanelDiv">
                                    <a href='#About' class="menuLink">About</a>
                                </div>
                            </div>
                        </li>
                </ul>
            </div>
        </div>
        <!-- END KWICKS SET -->


        <!-- SLIDER SET -->
        <div class="sliderContainer">
            <br /><br />
            <ul class="rs-slider">
                <li><img src="slide_img/img1.jpg" alt="" /></li>
                <li><img src="slide_img/img2.jpg" alt="" /></li>
                <li><img src="slide_img/img3.jpg" alt="" /></li>
            </ul>

        </div>
        <!-- END SLIDER SET -->

        <div class="divHead">
            <div class="welcomeMessage"></div>
            <div class="bookmarkRibbon"></div>
            <div class="welcomeBox nudge">
                <a href="#" data-animationspeed="650" data-reveal-id="myModal" class="welcomeW">W</a>
            </div>
            <div class="kccLogo"></div>
        </div>


        <!-- START DIV BODY -->

        <div class="divBody">

            <!-- START DIV HOME -->

            <div id='Home'>


            <!-- START LEFT SIDE -->

            <div class="rightContainer">

                <div class="rightContainerHead">
                    <ul class="webHeading">
                        <li>KCC Events!</li>
                    </ul>
                </div>

                <div class="rightSliderContainer">
                    <ul class="rs-slider2">
                        <li><img src="slide_img_event/img1.jpg" alt="" /></li>
                        <li><img src="slide_img_event/img2.jpg" alt="" /></li>
                    </ul>
                </div>
            </div>  

            <!-- END LEFT SIDE -->  


            <!-- START RIGHT SIDE -->

            <div class="leftContainer">

                <!-- START TOP -->
                <div class="topLeft">

                    <ul class="webHeadingQuestion">
                        <li>What Is KCC?</li>
                    </ul>

                    <div class="tucked-corners">
                        <div class="top-corners"></div>

                        <p class="webText">

                                KCC, or Korean Cultural Club, is a club formed during 2011 at UWA. With a passionate interest in Korean culture you can expect a full Korean experience with us. Our aim is to spread Korean culture and immerse other students in it. We do this through our events, chill sessions and activities.

                            <br><br>

                            KCC is rapidly growing, so jump right in and join!

                        </p>

                        <div class="bottom-corners"></div>
                    </div>

                    <!--

                    <div class="topLeftTextContainer">

                        <p class="webText">

                            KCC, or Korean Cultural Club, is a club formed during 2011 at UWA. With a passionate interest in Korean culture you can expect a full Korean experience with us. Our aim is to spread Korean culture and immerse other students in it. We do this through our events, chill sessions and activities.

                        <br><br>

                        KCC is rapidly growing, so jump right in and join!

                        </p>

                    </div>

                    -->

                </div>
                <!-- END TOP -->


                 <!-- START MIDDLE -->

                <div class="middleLeft">
                    <a href="#" class="button kcc medium">Find Out More</a>
                </div> 

                 <!-- END MIDDLE -->

                <div class="bottomLeft"></div> 

            </div>

            <!-- END RIGHT SIDE -->

            </div>

            <!-- END DIV HOME -->


            <!-- START DIV EVENTS -->

            <div id='Events'>



            </div>

            <!-- END DIV EVENTS -->

        </div>

        <!-- END DIV BODY -->

    </div>
    <!-- END Center page container -->


    <!-- MODAL HERE -->
        <div id="myModal" class="reveal-modal">

            <!-- START NOTEPAD HERE -->
            <div class="notepadTop">
                <p class="notepadTitle">Hey There!</p>
            </div>

            <div class="notepadMiddle">
                <div class="notepadMargin"></div>
                <p class="notepadText">

                    We need to sort some things out before we start.

                    <br><br>

                    This site uses the Webkit layout engine and will <span class="notepadHighlight">only work with the following browsers:</span>

                </p>

                <ul class="notepadList">
                    <li>Google Chrome</li>
                    <li>Safari</li>
                </ul>

                <p class="notepadTextTwo">

                    No, Firefox is not 100% supported because it doesn't use Webkit. Internet Explorer doesn't work at all.

                    <br><br>

                     <span class="notepadHighlight">The menu is above the image slider</span> and you can show this item again by clicking the blue "W", next to the red ribbon.

                </p>
            </div>

            <div class="notepadBottom">

                <p class="notepadTextFooter">Enjoy!</p>

            </div>
            <!-- END NOTEPAD HERE -->

             <a class="close-reveal-modal">&#215;</a>
        </div>
    <!-- END MODAL -->

    <!-- 
        *
        * SLIDER CALLS
        *
     -->

    <script src="refineslide/jquery.refineslide.min.js"></script>

    <script>
    $(document).ready(function () {
        $('.rs-slider').refineSlide({
            transition         : 'random',
            transitionDuration : 1000,
            autoPlay           : true,
            keyNav             : false,
            delay              : 3000,
            controls           : null
        });
    });
    </script>

    <script>
    $(document).ready(function () {
        $('.rs-slider2').refineSlide({
            transition         : 'cubeV',
            transitionDuration : 1000,
            autoPlay           : false,
            keyNav             : false,
            delay              : 4000,
            controls           : 'arrows'
        });
    });
    </script>

    <!-- 
        *
        * KWICKS CALLS
        *
     -->

    <script src='kwicks/jquery.kwicks.js' type='text/javascript'></script>
        <script type='text/javascript'>
            $(function() {
                $('.kwicks').kwicks({
                    size: 125,
                    maxSize : 250,
                    spacing : 5,
                    behavior: 'menu'
                });
            });
    </script>

    <!-- 
        *
        * REVEAL CALLS
        *
     -->

    <script src="reveal/jquery.reveal.js" type="text/javascript"></script>

</body>
</html>
4

1 回答 1

1

删除onClick="test();"并添加此脚本

<script>
$(document).ready(function() {
    $("#submission").on("click", function(event){
        alert('HI');
        event.preventDefault();
    }); 
});
</script>
于 2013-03-18T08:51:40.897 回答