jquery - 当相应的 div 出现时，为什么我的菜单没有显示事件类？

Question

我复制了滚动内容时突出显示的 jquery 代码菜单链接。但它不工作。

网站要求我添加更多详细信息，但我没有，所以写这篇文章。请原谅我。它不允许我发布这个问题。一直试图找出错误，但没有头绪。

这是我的 jsfiddle 链接: https://jsfiddle.net/6a8woca1/

$(document).ready(function(){

   $("div").mouseenter(function(){
     var id = $(this).attr("id");
     $('a').removeClass("active");
     $("[href=#"+id+"]").addClass("active");
   });


//    $(‘.abi’).on(‘moueseover’, function () {

// $(this). toggleClass(‘active’);

}) ;

* {

	margin: 0;
	padding: 0;

}


body {

	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: 'Adamina';
}

nav {

	position: fixed;
	width: 100%;
	text-align: center;
	background-color: rgb(0, 179, 179);
	z-index: 10;
}


nav ul {

	float: right;
}


#logo {

	display: inline-block;
	padding: 20px 40px;
	float: left;
	color: white;
}


#logo h1{

	font-family: 'Cinzel Decorative', black;
}


nav ul li {

	display: inline-block;

}


nav ul li a {

	color: white;
	text-decoration: none;
	display: block;
	padding: 20px 40px;

}


nav ul li a:hover {

	color: #FAFE7E;
	transition: color 0.5s ease;
}


nav ul li a.active {

	color: #FAFE7E;
}


.section1 {

	padding-top: 100px;
	/*height: 100vh;*/
	height: 100%;
	padding-bottom: 50px;
}



.section1 { background-color: rgb(0, 173, 169);}
.section2 { background-color: rgb(255, 250, 236); }
.section3 { background-color: #EBE1C4; }
.section4 { background-color: #CFC9B2; }


.intro {

	/*background-color: yellow;*/
	width: 40%;
	height: 30%;
	margin-left: 50px;
	margin-top: 100px;
	display: inline-block;

}


.intro p {

	font-family: 'Courgette', cursive;
	font-size: 30px;
	color: white;
}


#myPic {

	float: right;
	display: inline-block;
	width: 220px;
	height: 220px;
	margin-top: 95px;
	margin-right: 100px;
	border-radius: 50%;
}


.section2 h1 {

	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.thumbnail {

	display: inline-block;
}

.section3 {

	padding-bottom: 50px;
	/*height: 90vh;*/
	height: auto;
}
.section3 h1 {

	padding-top: 50px;
	padding-bottom: 20px;
	text-align: center;
}

.art {

	/*Prevent Vertical gaps*/
	line-height: 0;

	-webkit-column-count: 5;
	-webkit-column-gap: 10px;
	-moz-column-count: 5;
	-moz-column-gap: 10px;

}

.art img {

	/*Just in case there are inline attributes*/
	width: 100% !important;
	height: auto !important;
	padding-top: 10px;
}


.section4 {

	/*height: 90vh;*/
}

.section4 h1 {

	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;

}



input[type=text], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background-color: #ebe1c4;
}

input[type=Email] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background-color: #ebe1c4;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 10px;
    /*background-color: #fffaec;*/
    width: 50%;
    margin: auto;
    padding: 20px;
    border: 2px solid #ebe1c4 ;
}

.form-wrapper {

	padding-bottom: 40px;
}

footer {

	text-align: center;
	background-color: #6A8583;
}

.footerlink {

	padding: 20px 40px;
	display: inline-block;
	text-decoration: none;
	color: #fff;
}

footer p {

	text-align: center;
	color: #0a4557;
	font-size: 12px;
}


.active {

	color: #FAFE7E;

}






























@media (max-width: 1200px) {
  .art {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  .art {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  .art {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  .art {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Personal Portfolio</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous""></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Adamina' rel='stylesheet'>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:700">
	<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

</head>

<body>

	<nav>

		<div id="logo">

			<h1>Tarique</h1>

		</div>

		<ul>

			<li><a href="#about" class="active">About</a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#artworks">Artworks</a></li>
			<li><a href="#contact">Contact</a></li>

		</ul>

	</nav>


		<div id="about" class="about ">

			<div class="intro">

				<p>
					I am Tarique. A Front-end web developer based in India. I have passion towards web design. I create websites for web and mobile devices. I love sketching and painting digitally. Love restoring torn and old photos to new and colorful.
				</p>

			</div>

			<img id="myPic" src="tariq vector.jpg" alt="my picture">

		</div>



		<div id="portfolio" class="portfolio ">

			<h1>Portfolio</h1>

			<div id="templateGallery">

					<div class="thumbnail"><img src="web template/slide 1.jpg" alt=""></div>
					<div class="thumbnail"><img src="web template/slide 2.jpg" alt=""></div>
					<div class="thumbnail"><img src="web template/slide 3.jpg" alt=""></div>
					<div class="thumbnail"><img src="web template/slide 4.jpg" alt=""></div>
					<div class="thumbnail"><img src="web template/slide 5.jpg" alt=""></div>



				</div>

		</div>



		<div id="artworks" class="artworks ">

			<h1>Artworks</h1>

			<div class="art">

				<img src="https://pre00.deviantart.net/e408/th/pre/i/2016/051/0/4/candle_by_tariqbaig19-d9sfg1y.jpg" alt="">
				<img src="https://img00.deviantart.net/cb79/i/2016/046/0/c/canvas_shoes_by_tariqbaig19-d9rvif6.jpg" alt="">
				<img src="https://img00.deviantart.net/7393/i/2016/051/b/e/glass_and_bottle_by_tariqbaig19-d9sffj1.jpg" alt="">
				<img src="https://img00.deviantart.net/9532/i/2016/046/c/b/glass_vase_by_tariqbaig19-d9rvl1w.jpg" alt="">
				<img src="https://img00.deviantart.net/7d68/i/2016/111/a/f/headphone_by_tariqbaig19-d9zoooj.jpg" alt="">
				<img src="https://img00.deviantart.net/8a8a/i/2016/076/1/a/vintage_car_by_tariqbaig19-d9veq0t.jpg" alt="">
				<img src="https://img00.deviantart.net/d51d/i/2016/088/8/b/cadillac_coupe_by_tariqbaig19-d9ww9cl.jpg" alt="">
				<img src="https://pre00.deviantart.net/38de/th/pre/i/2016/066/0/3/grenade_by_tariqbaig19-d9sqe81.jpg" alt="">
				<img src="https://img00.deviantart.net/c653/i/2017/110/7/f/apple_work__by_tariqbaig19-db6hdmk.jpg" alt="">
				<img src="https://pre00.deviantart.net/360c/th/pre/i/2017/191/7/7/rose_digital_painting_by_tariqbaig19-dbftno7.jpg" alt="">

			</div>

		</div>

		<div id="contact" class="contact ">

			<h1>Contact</h1>

<div class="form-wrapper">
			<div class="container">
  				<form action="/action_page.php">

    				<label for="fname">Name</label>

    				<input type="text" id="fname" name="fullname" placeholder="Full name...">


				    <label for="mail">Email</label>

				    <input type="Email" placeholder="name@example.com"><br>


				    <label for="subject">Subject</label>

				    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    				<input type="submit" value="Submit">

  				</form>

			</div>
</div>
		</div>

		<footer>

			<a class="footerlink" href="https://tariqbaig19.deviantart.com/gallery/" target="_blank">DeviantArt</a>
			<a class="footerlink" href="https://www.flickr.com/photos/mdtariq/" target="_blank">Flickr</a>
			<a class="footerlink" href="https://www.instagram.com/baig_tarique/" target="_blank">Instagram</a>
			<p>&copy; 2018</p>

		</footer>






<script src="script.js"></script>

</body>
</html>

Answer 1

您在代码中使用了 jQuery，但忘记调用它。这是第一个问题。那么你的选择器是错误的

努力改变

$("[href=#" + id + "]").addClass('active');

通过

$("[href*=" + id + "]").addClass('active');

如果您使用它，请不要忘记将调用添加到 jQuery 库中。

这里有一个 fiddle :https://jsfiddle.net/kg4ubxjp/