HASHTAG的困难-如何打开一个下拉菜单没有标签被放置在URL
HASHTAG HARDSHIPS - How to Open a Menu Dropdown WITHOUT hashtag being placed in URL?
这是我的问题。假设我有一个菜单栏,当用户通过移动设备点击它时,它应该变成一个下拉菜单栏。说,我也讨厌当#符号出现在我的url后,当我点击说的菜单(例如www.google.com/#),我已经能够使用"动画滚动"javascript,允许我顺利滚动网站到一个锚定标签,这也隐藏了#符号。但是由于某些原因,我在小屏幕上打开菜单时遇到了问题!
这是菜单html
<div class=navmover>
<nav id="effect" class="newClass">
<ul>
<li id="mobibutton" class="lightupmobi">
<a href="#" id="button">
<div style="display:block !important;position:relative !important;top:8px !important;padding-left:0.5em !important;right:3px !important;text-align:left !important;">MENU</div>
<img id="mobibutton" src="images/nav-icon.png" style="position:relative !important;left:40% !important;">
</a>
</li>
<li id="hideme" class="lightup">
<a id=link1 href=#intro>Top</a>
</li>
<li id="hideme" class="lightup">
<a id=link2 href=#work>Work</a>
</li>
<li id="hideme" class="lightup">
<a id=link3 href=#services>Services</a>
</li>
<li id="hideme" class="lightup">
<a id=link4 href=#about>About</a>
</li>
<li id="hideme" class="lightup">
<a id=link5 href=#contact>Contact</a>
</li>
</ul>
</nav>
</div>
javascript用于打开和关闭菜单
<!--Show Hide Button JS-->
<script>
$(function() {
$("#button1").click(function() {
$("#effect").toggleClass("newClass", 1000);
$("li").toggleClass("showme", 1000);
return false;
});
});
</script>
javascript用于在锚点之间平滑滚动
<script type=text/javascript>
$(document).ready(function() {
$("#link1").anchorScroll({fx:"easeInOutExpo"});
$("#link2").anchorScroll({fx:"easeInOutExpo"});
$("#link3").anchorScroll({fx:"easeInOutExpo"});
$("#link4").anchorScroll({fx:"easeInOutExpo"});
$("#link5").anchorScroll({fx:"easeInOutExpo"});
$("#link6").anchorScroll({fx:"easeInOutExpo"});
$("#link7").anchorScroll({fx:"easeInOutExpo"});
});
</script>
<script type=text/javascript>
function scrollTo(b) {
var a=$(b).offset().top;
$("html,body").animate({scrollTop:a},"slow");
}
</script>
站点中其余的javascript。道歉……我意识到它看起来有很多。
<script async type="text/javascript" src="//cdn.sublimevideo.net/js/kmaxx7p4.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script async src=javascripts/svg.js></script>
<script src=javascripts/jquery.js></script>
<script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script>
<script src=http://code.jquery.com/jquery-1.9.1.min.js></script>
<script src=javascripts/jquery-migrate-1.2.1.min.js></script>
<script src=javascripts/jquery.animate.js type=text/javascript></script>
<script src=javascripts/jquery.scrollanchor.js type=text/javascript></script>
<script src=javascripts/jquery.sticky.js type=text/javascript></script>
<script async src=javascripts/jquery.inview.js type=text/javascript></script>
<script async src=javascripts/jquery.flexslider.js type=text/javascript></script>
<script async src=javascripts/jquery.prettyPhoto.js type=text/javascript></script>
<script src=http://vjs.zencdn.net/c/video.js></script>
<script type=text/javascript>function ReplaceContentInContainer(c,b){var a=document.getElementById(c);a.innerHTML=b}</script>
<script type=text/javascript>function preload(a){$(a).each(function(){$("<img/>")[0].src=this})}preload(["images/bg.png","images/cloudscape2.png","images/logo2.svg","images/logo2.png",]);</script>
<script>$(function(){$(".two").css("opacity",0).fadeTo(0,0);$(".one").on("mouseenter mouseleave",function(a){var b=a.type=="mouseenter"?$(".two",this).stop().fadeTo(200,1):$(".two",this).stop().fadeTo(200,0)})});</script>
<script>$(document).ready(function(){$("nav").sticky({topSpacing:0})});</script>
<script type=text/javascript>$(document).ready(function(){$("#link1").anchorScroll({fx:"easeInOutExpo"});$("#link2").anchorScroll({fx:"easeInOutExpo"});$("#link3").anchorScroll({fx:"easeInOutExpo"});$("#link4").anchorScroll({fx:"easeInOutExpo"});$("#link5").anchorScroll({fx:"easeInOutExpo"});$("#link6").anchorScroll({fx:"easeInOutExpo"});$("#link7").anchorScroll({fx:"easeInOutExpo"});});</script>
<script type=text/javascript>function scrollTo(b){var a=$(b).offset().top;$("html,body").animate({scrollTop:a},"slow");}</script>
<script>$(window).load(function(){$(".flexslider").flexslider({animation:"slide",slideshow:true,slideshowSpeed:3500,animationSpeed:1000})});</script>
<script type=text/javascript charset=utf-8>$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false,theme:"light_square"})});</script>
如果迫不得已,我也可以给我的网站链接,这样你就可以自己在你的手机/平板电脑上看到我遇到的问题。如果我说得太模糊,请告诉我,你们也需要更多的信息。请帮忙,谢谢!
不要使用#
作为href
值。有很多不同的方法可以像你想做的那样"无目标",包括:
- 在绑定到事件的代码中使用
event.preventDefault()
,忽略默认链接行为 - 在绑定到事件的代码末尾使用
return false;
,一起中断事件的任何进一步处理 - 使用
href="javascript: void(0);"
作为<a>
标签的目标,使目标"什么都不做"
…还有其他的变化,取决于情况(例如,event.stopPropagation()
阻止事件触发所有元素的祖先,而不是当前元素)。
就我个人而言,在这种特殊情况下,我自己会走href="javascript: void(0);"
路线,但你有一些回旋的空间来工作,想出你喜欢的方法。
更新:想想看,你为什么要使用<a>
标记开始(例如,样式原因)?您可以简单地将点击绑定到<li>
上,并从等式中删除链接行为…
你可以运行一个你想要的滚动函数
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
如果你不想要标签,因为你不想让它到页面的顶部,只需使用一个空的javascript: URL。
<a href="javascript:">Link does nothing, tada</a>
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 从下拉菜单选项中显示“标题”标签
- 如何创建包含链接或“”标签的下拉菜单
- 使用下拉菜单平滑滚动到锚标签
- 我想通过javascript自动更改选择标签的下拉菜单文本
- 我如何创建一个下拉菜单与标签的复选框列表使用bootstrap
- 一旦选定值,如何将下拉菜单转换为标签.再次转换为按钮的下拉按钮
- 引导3导航,下拉菜单,标签(仍然)不能在IE8中工作
- HASHTAG的困难-如何打开一个下拉菜单没有标签被放置在URL
- 在AngularJs / Javascript中创建禁用下拉菜单的标签
- 下拉菜单干扰其他标签
- Bootstrap 3菜单,一个按钮切换标签并打开下拉菜单