jQuery：点圆设置位置菜单悬停/悬停并单击导航链接

Question

jQuery ：这是我编写的代码，但无法正常运行，我需要在菜单上单击活动圈子并保持活动链接，而不要回到顶部。

1. 当悬停导航链接圆圈点到达时
2. 当单击导航链接的圆点时，保持活动链接
3. 当链接处于活动状态并且在将鼠标悬停在任何其他链接上之后在此处圈出圆点时，圆圈点将转到那里并返回到活动链接

如果您有任何建议或解决方案，请给我答复

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(moveobj).css("opacity",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 class="navigation_box">
    <ul>
        <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
        <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
        <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
        <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
        <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
        <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
        <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
    </ul>
    <div class="nav_active_dot"></div>
</div>

Answer 1

您可以使用以下方法使您的活动项目符号蓝色：

.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(moveobj).css("opacity", 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 class="navigation_box">
  <ul>
    <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
    <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
    <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
    <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
    <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
    <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
    <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
  </ul>
  <div class="nav_active_dot"></div>
</div>

但是你这样说：

  

当链接处于活动状态时，将鼠标悬停在任何其他链接上后在该点上加圆圈   圆点转到该位置并返回到活动链接

在这种情况下，您可以使用变量（在下面的演示中为homePos）设置默认位置。您可以返回到mouseout上的默认位置，然后在活动链接上设置 -见下文：

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", 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() {
        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 class="navigation_box">
  <ul>
    <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
    <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
    <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
    <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
    <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
    <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
    <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
  </ul>
  <div class="nav_active_dot"></div>
</div>