为什么激活锚点时某些JavaScript函数不起作用（URL中的#anchor）

Question

编辑第一位：确实很奇怪，实际上当我单击锚点时，我的javascript函数不起作用！ 真的...如果有人有一个主意，我将非常感激 ！

我正在编写一个简单的主页，该主页由带有表单的标题和带有介绍我的网站内容的部分组成。

而且由于锚点，我有两个问题（至少看起来是这样）：单击锚点时，我的javascript函数似乎不起作用。 我会更准确地向您解释。

一，用于显示表格的Javascript函数

第一部分由标题组成。 在此标题上，您具有连接或注册的表单。 我不会同时显示这两种形式：实际上，我仅首先显示连接形式。 如果用户不是会员，则只需单击“我没有帐户”，然后将我的连接表单替换为注册表单。 （由于有一个jQuery代码）

在标题的末尾，我放了一个箭头。 当您单击它时，您将直接转到我的网站内容的表示形式（感谢锚点）。

二。 用于显示精确内容摘要的Javascript函数

单击锚点后，用户面对3个圆圈（标题：内容1，内容2和内容3）。 当用户飞过一个圆圈时，该圆圈将变为矩形形式并显示内容摘要。

但是当我不单击锚点时：一切正常。 但是，当我单击锚点时，用于显示表单和显示圈子内容的javascript函数根本不起作用！ 我不知道如何解决它。 我尝试从网址中删除锚点，例如： http：// mywebsite /＃anchor到http：// mywebsite，但到目前为止我还没有做好。

三， 代号

这是我的HTML代码和Javascript代码。

<header>
        <div class="intro-header">
            <h1>TEST MY WEBSITE</h1>
            <div class="divForm_global">
                <div class="divForm_connexion" id="divForm_connexion">
                    <h3>Connect to your account</h3>
                    <form class="form_connexion">
                        <div class="form-group">
                            <label for="email">Email address: </label>
                            <input type="email" class="form-control" id="loginemail">
                        </div>
                        <div class="form-group">
                            <label for="pwd">Password: </label>
                            <input type="password" class="form-control" id="loginpasswordd">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox">Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-default" id="login">Submit</button>
                        <p id="one"><a href="#">Forgot Password ?</a></p>
                        <p id="two">Don't have account? <a class="signup" href="#" id="signup">Sign up here</a></p>
                    </form>
                </div>

                <div class="divForm_register" id="divForm_register">
                    <h3>Register Form FOR TEST</h3>
                    <form class="form_register">
                        <div class="form-group">
                            <label for="name">Name/Pseudo: </label>
                            <input type="text" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email address: </label>
                            <input type="email" class="form-control" id="registeremail">
                        </div>
                        <div class="form-group">
                            <label for="pwd">Password: </label>
                            <input type="password" class="form-control" id="registerpassword">
                        </div>                          
                        <button type="submit" class="btn btn-default" id="register">Submit</button>
                        <p id="two">Already have an account? <a class="signin" href="#" id="signin">Sign in</a></p>
                    </form>
                </div>
            </div>
            <div class="page-scroll">
                <a href="#service" class="btn btn-circle">
                    <i class="fa fa-angle-double-down animated"></i>
                </a>                
            </div>
            <hr class="intro-divider" />
        </div>
    </header>

    <section id="service">
        <script src="js/display_content_circle.js" type="text/javascript"></script>
        <div class="wow bounceInDown" data-wow-delay="0.4s">
            <h2>I CONTINUE TO TEST HERE </h2>
        </div>
        <div id="test>
            <div class="container">
                <div class="row" style="margin-top: 75px;">
                    <div class="wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="col-md-4" style="height: 250px;">
                            <div class="panel circular-panel panelGeneral">
                                <h3 class="header" style="font-family:stencil,serif;color:red;">TITLE CIRCLE 1 TEST</h3>
                                <div class="description-header" style="display: none;">
                                    <i class="panel-icon flaticon-tool"></i><a href="#" style="color:red; font-style:bold;">TEST HERE</a>
                                </div>
                                <p class="description" style="display: none;">TEST TEST TEST TEST</p>
                            </div>
                        </div>
                    </div>                  
                </div>                  
            </div>
        </div>
    </section>

在这里，您将找到我的JavaScript函数，以在我飞越圆圈时显示圆圈的内容：

var main = function()
    {
        $('.circular-panel').hover(function()
        {
            $(this).animate(
            {
                width: '250px',  
                height: '250px', 
                borderWidth: '1px', 
                borderRadius: '4px', 
                lineHeight: '24px'
            }, 100);
            $(this).children('.header').fadeOut(100);
            $(this).children('.description-header').fadeIn(100);
            $(this).children('.description').fadeIn(100);
        }, function()
        {
            $(this).animate(
            {
                width: '150px', 
                height: '150px', 
                borderWidth: '5px', 
                borderRadius: '50%', 
                lineHeight: '140px'
            }, 100);
            $(this).children('.header').fadeIn(100);
            $(this).children('.description-header').fadeOut(100);
            $(this).children('.description').fadeOut(100);
        });


        $('.extra').children('.glyphicon-remove').click(function()
        {
            $('.extra').slideUp('fast');
            $('.copyright').animate(
            {
                marginBottom: '0px'
            }, 'fast');
        });
    };

    $(document).ready(main);

为了不让您的代码使您不知所措，我决定不向您显示更改表单功能的代码，因为我认为如果我们设法用“圆圈”解决问题，我将设法解决我猜想的表单问题但是，如果需要的话，问我

我真的认为问题出在那些使用“ $ document”的函数上，也许由于锚点而被修改了。 因此，选择器不起作用，因为它是没有锚点（ http：// Website ）的网站，而当我单击锚点时，则具有（ http：// website /＃anchor ）。

你有想法吗 ？ 我们可以停用锚点的URL吗？ （单击没有该#anchor的锚点将添加到网站的URL吗？）

Answer 1

您可以这样做：

$('a').on('click', function(e){
   e.preventDefault();
});

这也将防止链接的默认行为。