我想制作一個導航欄，其中活動站點顯示 html 和 js 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
<title>ANKAR - Website Version</title>
</head>
<body>
<div class="banner">
<nav>
<h4 class="logo">ANKAR</h4>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#page2">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
<div class="burger">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</div>
</nav>
<section class="front_page">
<div class="heading">
<h1>ANKAR</h1>
<p>Where do you want to go, Pawel?</p>
<div class="cta">
<button class="star_wars">Star Wars</button>
<button class="ld">Lucid Dreaming</button>
<button class="ba">Add pls</button>
</div>
</div>
</section>
</div>
<script src="../static/java_file.js"></script>
<script>
$(document).ready(function() {
$( "nav ul li a.active" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( "nav ul li a.active" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
</script>
</body>
</html>
這里有某種錯誤，因為它不起作用。我不能做 js 這就是為什么我復制了一個代碼并改變了“nav ul li a.active”的東西。我不知道錯誤在哪里。請幫助CSS：
nav ul li a.active::after {
background: linear-gradient(90deg, grey 30%, #fff 0%, #fff 80%);
content: "";
height: 3px;
width: 100%;
position: absolute;
left: 0;
bottom: -10px;
box-shadow: 15px 0px 5px 2px rgba(0,255,255,1);
clip-path: inset(-10px -0.5px -10px 2px);
}
uj5u.com熱心網友回復：
您將點擊系結到僅發生在“活動”元素上。更改該塊，使其附加到所有導航鏈接，而不僅僅是“活動”鏈接：
$( "nav ul li a" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( "nav ul li a.active" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
uj5u.com熱心網友回復：
此腳本使用 jQuery，這是一個 javascript 庫
<head>如果您希望它作業，請將其包含在您的頂部：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/363322.html
標籤：javascript html 查询 css
下一篇：查找單擊html按鈕時發生的情況