Почему некоторые функции JavaScript не работают, когда активирован якорь (#anchor in URL)
РЕДАКТИРОВАТЬ НОМЕР ОДИН: Это действительно странно, на самом деле мои функции JavaScript не работают, когда я нажимаю на якорь! Действительно... Если у кого-то есть идея, я был бы так благодарен!
Я кодирую простую домашнюю страницу, состоящую из заголовка с формами и раздела с введением в содержание моего сайта.
И у меня есть две проблемы из-за моего якоря (по крайней мере, кажется): похоже, что мои функции JavaScript не работают, когда я нажимаю на якорь. Я объясню вам более точно.
I. Javascript функция для отображения форм
Первая часть состоит из заголовка. В этом заголовке у вас есть форма для подключения или регистрации. Я не отображаю обе формы: на самом деле сначала я отображаю только форму подключения. если пользователь не является участником, ему просто нужно нажать "У меня нет учетной записи", и тогда моя форма подключения заменяется формой регистрации. (благодаря коду JQuery)
В конце заголовка я поставил стрелку. Когда вы нажимаете на нее, вы переходите непосредственно к представлению содержимого моего сайта (спасибо якорю).
II. Функция Javascript для отображения сводки точного содержания
После нажатия на якорь пользователи сталкиваются с 3 кружками (с заголовком: контент 1, контент 2 и контент 3). Когда пользователь пролетает над кружком, этот кружок переходит в прямоугольную форму и отображает сводку содержимого.
Но когда я не нажимаю на якорь: все работает нормально. Но когда я нажимаю на якорь, функции javascript для отображения форм и отображения содержимого из круга не работают вообще! Я понятия не имею, как это исправить. Я пытаюсь стереть привязку с URL-адреса, например: http://mywebsite/ to http://mywebsite/, но пока мне не удалось.
III. коды
Вот мой 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/).
У тебя есть идея? Можем ли мы отключить URL-адрес якоря? (клик на якорь без этого #anchor добавляется в URL веб-сайта?)
1 ответ
Вы могли бы сделать это:
$('a').on('click', function(e){
e.preventDefault();
});
Это предотвратит поведение по умолчанию ссылок также.