jquery：这是我编写的代码,但无法正常工作,我需要在单击菜单时使活动圈子保持活动链接,而不是回到顶部.
>当悬停导航链接圆圈点到达那里时
>单击导航链接时,圆点保持活动链接
>如果链接处于活动状态,并且在将鼠标悬停在其他任何链接上之后在此处添加圆点,则圆圈点将转到该位置并返回到活动链接
如果您有任何建议或解决方案,请给我答复
jquery(document).ready(function() { var activelenght = jquery(".navigation_Box ul li.active a").length; var activelenghtfirst = jquery(".navigation_Box ul li#secmain.active a").length; var moveobj = jquery(".nav_active_dot"); var activeobj = jquery(".navigation_Box ul li.active a"); var activeobjoff = activeobj.offset().top; var activeparentoff = activeobj.parent().parent().offset().top; var finaloffactive = activeobjoff-activeparentoff; if (activelenghtfirst > 0) { jquery(moveobj).CSS("top",finaloffactive); jquery(moveobj).CSS("opacity",1); } else { jquery(moveobj).CSS("opacity",0); } jquery(".navigation_Box ul li a").each(function() { jquery(this).mouSEOver(function () { var obj = jquery(this); var childPos = obj.offset(); var parentPos = obj.parent().parent().offset(); var childOffset = childPos.top - parentPos.top; jquery(moveobj).CSS("opacity",1); jquery(moveobj).CSS("top",childOffset); }); jquery(this).mouSEOut(function() { if( activelenghtfirst > 0) { jquery(moveobj).CSS("top",0); jquery(moveobj).CSS("opacity",0); console.log("2"); } else { jquery(moveobj).CSS("top",0); } }); jquery(this).click(function(e) { e.preventDefault(); jquery(this).parent().addClass("active"); jquery(this).parent().siblings().removeClass("active"); }); }); });* { -webkit-Box-sizing:border-Box; -moz-Box-sizing:border-Box; Box-sizing:border-Box;} .navigation_Box { Font-family:arial; position:relative;} .navigation_Box ul { display:block; margin:0; padding:0; position:relative;} .navigation_Box ul li { display:block; margin:0; padding:0; position:relative;} .navigation_Box ul li a { color:#000; margin:0; padding:7px 0 7px 30px; Font-size:14px; display:inline-block; vertical-align:top; position:relative; text-decoration:none;} .navigation_Box ul li a .circle_border { wIDth:10px; height:10px; border-radius:50px; background:#fff; border:solID 1px #000; position:absolute; left:0; top:10px; z-index:1;} .navigation_Box ul li.active a { color:#47c5f3;} .navigation_Box ul li a:hover { color:#47c5f3;} .navigation_Box ul li a:after { position:absolute; left:5px; wIDth:1px; content:''; background:#000; height:30px; top:19px;} .navigation_Box ul li:last-child a:after { display:none;} .navigation_Box .nav_active_dot { position:absolute; left:0; top:0; wIDth:10px; height:10px; background:#47c5f3; border-radius:20px; margin:10px 0 0 0; opacity:0; z-index:2; -webkit-Transition:all ease-in-out 0.3s; -moz-Transition:all ease-in-out 0.3s; Transition:all ease-in-out 0.3s; }<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><div > <ul> <li ><a href="#" ID="secmain" ><span ></span>Who we are</a></li> <li><a href="#" ID="secwho"><span ></span>Home</a></li> <li><a href="#" ID="secbes"><span ></span>Solutions</a></li> <li><a href="#" ID="secfac"><span ></span>Factor</a></li> <li><a href="#" ID="sectra"><span ></span>StorIEs</a></li> <li><a href="#" ID="secfor"><span ></span>Services</a></li> <li><a href="#" ID="secnew"><span ></span>News</a></li> </ul> <div ></div></div>.navigation_Box ul li.active a .circle_border { background: #47c5f3; border: 1px solID #47c5f3;}请参见下面的演示：
jquery(document).ready(function() { var activelenght = jquery(".navigation_Box ul li.active a").length; var activelenghtfirst = jquery(".navigation_Box ul li#secmain.active a").length; var moveobj = jquery(".nav_active_dot"); var activeobj = jquery(".navigation_Box ul li.active a"); var activeobjoff = activeobj.offset().top; var activeparentoff = activeobj.parent().parent().offset().top; var finaloffactive = activeobjoff - activeparentoff; if (activelenghtfirst > 0) { jquery(moveobj).CSS("top",finaloffactive); jquery(moveobj).CSS("opacity",1); } else { jquery(moveobj).CSS("opacity",0); } jquery(".navigation_Box ul li a").each(function() { jquery(this).mouSEOver(function() { var obj = jquery(this); var childPos = obj.offset(); var parentPos = obj.parent().parent().offset(); var childOffset = childPos.top - parentPos.top; jquery(moveobj).CSS("opacity",1); jquery(moveobj).CSS("top",childOffset); }); jquery(this).mouSEOut(function() { if (activelenghtfirst > 0) { jquery(moveobj).CSS("top",0); jquery(moveobj).CSS("opacity",0); console.log("2"); } else { jquery(moveobj).CSS("top",0); } }); jquery(this).click(function(e) { e.preventDefault(); jquery(this).parent().addClass("active"); jquery(this).parent().siblings().removeClass("active"); }); });});* { -webkit-Box-sizing: border-Box; -moz-Box-sizing: border-Box; Box-sizing: border-Box;}.navigation_Box { Font-family: arial; position: relative;}.navigation_Box ul { display: block; margin: 0; padding: 0; position: relative;}.navigation_Box ul li { display: block; margin: 0; padding: 0; position: relative;}.navigation_Box ul li a { color: #000; margin: 0; padding: 7px 0 7px 30px; Font-size: 14px; display: inline-block; vertical-align: top; position: relative; text-decoration: none;}.navigation_Box ul li a .circle_border { wIDth: 10px; height: 10px; border-radius: 50px; background: #fff; border: solID 1px #000; position: absolute; left: 0; top: 10px; z-index: 1;}.navigation_Box ul li.active a { color: #47c5f3;}.navigation_Box ul li.active a .circle_border { /* added */ background: #47c5f3; border: 1px solID #47c5f3;}.navigation_Box ul li a:hover { color: #47c5f3;}.navigation_Box ul li a:after { position: absolute; left: 5px; wIDth: 1px; content: ''; background: #000; height: 30px; top: 19px;}.navigation_Box ul li:last-child a:after { display: none;}.navigation_Box .nav_active_dot { position: absolute; left: 0; top: 0; wIDth: 10px; height: 10px; background: #47c5f3; border-radius: 20px; margin: 10px 0 0 0; opacity: 0; z-index: 2; -webkit-Transition: all ease-in-out 0.3s; -moz-Transition: all ease-in-out 0.3s; Transition: all ease-in-out 0.3s;}<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><div > <ul> <li ><a href="#" ID="secmain" ><span ></span>Who we are</a></li> <li><a href="#" ID="secwho"><span ></span>Home</a></li> <li><a href="#" ID="secbes"><span ></span>Solutions</a></li> <li><a href="#" ID="secfac"><span ></span>Factor</a></li> <li><a href="#" ID="sectra"><span ></span>StorIEs</a></li> <li><a href="#" ID="secfor"><span ></span>Services</a></li> <li><a href="#" ID="secnew"><span ></span>News</a></li> </ul> <div ></div></div>但是你已经这样说了：
When link is active and circle dot there after hover any another link
the circle dot goes to there and go back to active link
在这种情况下,您可以使用变量(例如下面的演示中的homePos)来设置默认位置.您可以在鼠标移出时返回该默认位置,然后在活动链接上进行设置-参见下文：
jquery(document).ready(function() { var homePos = 0; var activelenght = jquery(".navigation_Box ul li.active a").length; var activelenghtfirst = jquery(".navigation_Box ul li#secmain.active a").length; var moveobj = jquery(".nav_active_dot"); var activeobj = jquery(".navigation_Box ul li.active a"); var activeobjoff = activeobj.offset().top; var activeparentoff = activeobj.parent().parent().offset().top; var finaloffactive = activeobjoff - activeparentoff; if (activelenghtfirst > 0) { jquery(moveobj).CSS("top",childOffset); }); jquery(this).mouSEOut(function() { jquery(moveobj).CSS("top",homePos); /* changed */ jquery(moveobj).CSS("opacity",homePos); /* changed */ }); jquery(this).click(function(e) { e.preventDefault(); jquery(this).parent().addClass("active"); jquery(this).parent().siblings().removeClass("active"); /* added below */ var obj = jquery(this); var childPos = obj.offset(); var parentPos = obj.parent().parent().offset(); homePos = childPos.top - parentPos.top; }); });});* { -webkit-Box-sizing: border-Box; -moz-Box-sizing: border-Box; Box-sizing: border-Box;}.navigation_Box { Font-family: arial; position: relative;}.navigation_Box ul { display: block; margin: 0; padding: 0; position: relative;}.navigation_Box ul li { display: block; margin: 0; padding: 0; position: relative;}.navigation_Box ul li a { color: #000; margin: 0; padding: 7px 0 7px 30px; Font-size: 14px; display: inline-block; vertical-align: top; position: relative; text-decoration: none;}.navigation_Box ul li a .circle_border { wIDth: 10px; height: 10px; border-radius: 50px; background: #fff; border: solID 1px #000; position: absolute; left: 0; top: 10px; z-index: 1;}.navigation_Box ul li.active a { color: #47c5f3;}.navigation_Box ul li a:hover { color: #47c5f3;}.navigation_Box ul li a:after { position: absolute; left: 5px; wIDth: 1px; content: ''; background: #000; height: 30px; top: 19px;}.navigation_Box ul li:last-child a:after { display: none;}.navigation_Box .nav_active_dot { position: absolute; left: 0; top: 0; wIDth: 10px; height: 10px; background: #47c5f3; border-radius: 20px; margin: 10px 0 0 0; opacity: 0; z-index: 2; -webkit-Transition: all ease-in-out 0.3s; -moz-Transition: all ease-in-out 0.3s; Transition: all ease-in-out 0.3s;}<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><div > <ul> <li ><a href="#" ID="secmain" ><span ></span>Who we are</a></li> <li><a href="#" ID="secwho"><span ></span>Home</a></li> <li><a href="#" ID="secbes"><span ></span>Solutions</a></li> <li><a href="#" ID="secfac"><span ></span>Factor</a></li> <li><a href="#" ID="sectra"><span ></span>StorIEs</a></li> <li><a href="#" ID="secfor"><span ></span>Services</a></li> <li><a href="#" ID="secnew"><span ></span>News</a></li> </ul> <div ></div></div>以上是内存溢出为你收集整理的jQuery：点圆设置位置菜单悬停/悬停并单击导航链接 全部内容，希望文章能够帮你解决jQuery：点圆设置位置菜单悬停/悬停并单击导航链接 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）