我复制了滚动内容时突出显示的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>© 2018</p>
</footer>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分：0)
您在代码中使用jQuery，但忘记调用它。这是第一个问题。那你的选择器错了
尝试改变
$("[href=#" + id + "]").addClass('active');
通过
$("[href*=" + id + "]").addClass('active');
如果您使用它，请不要忘记将调用添加到jQuery库中。
这里有一个小提琴：https://jsfiddle.net/kg4ubxjp/