Question

我有一个单页滚动菜单，当悬停链接时，从左到右滑动下划线。在特定部分（例如＆＃34;关于＆＃34;。

）中，我需要有关如何使链接处于活动状态（意味着行已满）的帮助

这张照片可能有助于展示我所谈论的内容（请注意链接＆＃34;运行＆＃34;正在突出显示）：

我已经看到很多关于链接在线活动的例子，但是它非常令人困惑，因为我找不到我的具体问题。

我在网上找到的最接近的例子是http://jsfiddle.net/mdesdev/zkrh7/，但我仍然无法弄清楚如何修复下划线活动。

我创造了一个js小提琴来展示我到目前为止所拥有的东西： https://jsfiddle.net/rsrsrs/36rtdboh/

HTML：

<div id="nav_Wrapper_dk">
<nav id="dk_Nav" role="navigation" class="cf">

    <div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a>      </div>
    <div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
    <div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
    <div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
    <div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
    <div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
    <div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

</nav>

</div>


<div id="home"></div>

<div id="about"></div>

CSS：

#nav_Wrapper_dk {
  position: fixed;
  width: 100%;
  height: 50px;
  background: white;
  border-bottom: 1px solid #f1f1f1;
}

#dk_Nav {
    width: 742.6167px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2001;
    background: white;
}

    #dk_Nav div {
        margin-top: 11px;   
    }

    .link_Button {
        display: block;
        float: left;
        height: 40px;
        font-family: 'Open Sans', sans-serif;
        font-size: .7em;
        color: black;
        line-height: 3.3em;
        text-transform: uppercase;
        letter-spacing: .2em;
        margin-right: 44.8px;
    }

#dk_Nav div a {
  text-decoration: none
}

    /* LEFT TO RIGHT */
    .sliding-u-l-r {
        display: inline-block;
    }

    .sliding-u-l-r:after {
        content: '';
        display: block;
        height: 3px;
        width: 0;
        background: transparent;
        transition: width .3s ease, background-color .3s ease;
    }

    .sliding-u-l-r:hover:after {
        width: 100%;
        background: black;
    }


#home {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

#about {
  width: 100%;
  height: 1000px;
  background: white;
}

使用Javascript：

// Scroll Menu
jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
  event.preventDefault();
  $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});

非常感谢任何形式的帮助，谢谢！

Answer 1

创建一个.active类，在查看动画结束时显示该栏。

点击这些元素之间点击它：

$(document).on('click','.scroll',function(e){
    $('.scroll').removeClass('active');
    $(e.target).addClass('active');
});

JSFIDDLE示例

https://jsfiddle.net/Panomosh/yu530bpf/

Answer 2

像这样修改你的css类

.sliding-u-l-r:hover:after, .sliding-u-l-r.active:after {
    width: 100%;
    background: black;
}

和你的javascript到这样的

jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
    event.preventDefault();
    $( ".scroll" ).removeClass("active");
    $( this ).addClass("active");
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});

Answer 3

以下是您想要的工作示例：

基本上点击菜单2会发生互动 -

元素平滑地滚动到给定的id确定点。（滚动现在更顺畅。）

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }

当前菜单项获取活动类。

<强> JS -

$(this).addClass('active').parent().siblings().children().removeClass('active');

<强>的CSS -

.sliding-u-l-r.active:after {
  width: 100%;
  background: black;
}

以下是上述解释的编译片段：）

// Scroll Menu
$(function() {


  $("nav  a").click(function() {
    //**Add class active to current clicked menu item  and remove class active from other menu item**//
    $(this).addClass('active').parent().siblings().children().removeClass('active');
    //** Smooth scroll Logic **?
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

#nav_Wrapper_dk {
  position: fixed;
  width: 100%;
  height: 50px;
  background: white;
  border-bottom: 1px solid #f1f1f1;
}

body {
  margin: 0px;
}

#dk_Nav {
  width: 742.6167px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2001;
  background: white;
}

#dk_Nav div {
  margin-top: 11px;
}

.link_Button {
  display: block;
  float: left;
  height: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: .7em;
  color: black;
  line-height: 3.3em;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-right: 44.8px;
}

#dk_Nav div a {
  text-decoration: none
}


/* LEFT TO RIGHT */

.sliding-u-l-r {
  display: inline-block;
}

.sliding-u-l-r:after {
  content: '';
  display: block;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .3s ease, background-color .3s ease;
}

.sliding-u-l-r:hover:after {
  width: 100%;
  background: black;
}

.sliding-u-l-r.active:after {
  width: 100%;
  background: black;
}

#home {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

#about {
  width: 100%;
  height: 1000px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">
  <nav id="dk_Nav" role="navigation" class="cf">

    <div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a></div>
    <div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
    <div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
    <div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
    <div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
    <div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
    <div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>


  </nav>

</div>


<div id="home"></div>

<div id="about"></div>

Answer 4

根据您的要求，您可以在此片段中查看示例。希望这会有所帮助。

＆＃13;

// Scroll Menu
jQuery(document).ready(function($) {
  $("div a").click(function(event) {
    event.preventDefault();
   
1
    $( "nav" ).find( ".active" ).removeClass('active');
     $(this).addClass('active');
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000,'linear');
  });
});

＆＃13;

#nav_Wrapper_dk {
	position: fixed;
	width: 100%;
	height: 50px;
	background: white;
	border-bottom: 1px solid #f1f1f1;
}



	#dk_Nav {
		width: 742.6167px;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2001;
    background: white;
	}

		#dk_Nav div {
			margin-top: 11px;	
		}

		.link_Button {
			display: block;
			float: left;
			height: 40px;
			font-family: 'Open Sans', sans-serif;
			font-size: .7em;
			color: black;
			line-height: 3.3em;
			text-transform: uppercase;
			letter-spacing: .2em;
			margin-right: 44.8px;
		}
    
    #dk_Nav div a {
      text-decoration: none
    }

		/* LEFT TO RIGHT */
		.sliding-u-l-r {
			display: inline-block;
		}

		.sliding-u-l-r:after {
			content: '';
			display: block;
			height: 3px;
			width: 0;
			background: transparent;
			transition: width .3s ease, background-color .3s ease;
		}


	
		.sliding-u-l-r:hover:after ,.sliding-u-l-r.active:after{
			width: 100%;
			background: black;
		}
    
    
    #home {
      width: 100%;
      height: 1000px;
      background: #ccc;
    }
    
    #about {
      width: 100%;
      height: 1000px;
      background: white;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">
	<nav id="dk_Nav" role="navigation" class="cf">

		<div><a href="#home" class="link_Button sliding-u-l-r scroll active">Home</a></div>
		<div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
		<div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
		<div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
		<div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
		<div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
		<div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

	</nav>

</div>


<div id="home"></div>

<div id="about"></div>

＆＃13;

滚动时的一个页面菜单，下划线滑动链接为活动状态

4 个答案: