当锚被激活时,为什么一些JavaScript函数不能工作(URL中的#anchor)
Why some JavaScript functions don't work when a anchor is activate (#anchor in URL)
编辑1:这是真的很奇怪,事实上我的javascript函数不工作,当我点击锚!真的……如果有人有主意我会很感激的 !
我正在编写一个简单的主页,由一个带有表单的标题和一个介绍我网站内容的部分组成。
我有两个问题,因为我的锚(至少看起来):它看起来像我的javascript函数不工作,当我点击锚。我将更准确地向你解释。
。显示表单的Javascript函数
第一部分由标题组成。在这个标题上有一个要连接或注册的表单。我没有显示这两个表单:实际上,我只首先显示连接表单。如果用户不是会员,他只需要点击"我没有帐户",然后我的连接表单被注册表单取代。(感谢jquery代码)
在header的末尾我放了一个箭头。当你点击它,你直接到我的网站内容的介绍(感谢锚)。
二世。显示精确内容摘要的Javascript函数
点击锚点后,用户面对3个圆圈(标题:content1, content2和content3)。当用户飞过一个圆圈时,这个圆圈移动到一个矩形形式,并显示内容摘要。
但是当我不点击锚:一切都很好。但是,当我点击锚的javascript函数显示的形式和显示的内容从圆圈不工作在所有!我不知道怎么修理它。我试图从url中删除锚,例如:http://mywebsite/#anchor到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/#anchor)。
你有主意吗?我们可以停用锚的URL吗?(点击锚点而不添加#anchor到网站的URL ?)
你可以这样做:
$('a').on('click', function(e){
e.preventDefault();
});
这将阻止链接的默认行为
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JS可以在Chrome中工作,但不能在Firefox中工作
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- Facebook登录按钮没有'不能在Firefox上工作
- jQuery Datepicker可以在Safari中工作,但不能在FF或Chrome中工作
- javascript没有´我不能在joomla 3.0中工作
- 用javascript将script元素附加到头部;铬不能工作
- jQuery函数不能只在一个页面上工作
- 为什么这个代码不能正常工作
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- 为什么Turbolinks不能正常工作?Rails应用程序
- jQuery dosn'内联函数不能按预期工作
- 为什么这个javascript工作不能正确地分配.cells[] ?
- 谷歌应用引擎云端点:OAuth2不工作.不能加载api
- 输入焦点不工作/不能选择单选按钮-引导
- LocalStorage不能在iPhone上工作-不能在私人浏览
- 工作不能代替生活