[英]How can I use HTML, CSS, or JS to make an element active by default?
我希望<li><a href="#">Home</li></a>在用戶到達我的頁面時自動激活。
當用戶最初到達站點時，有什么方法可以使用 css、html 或 js 將鏈接設置為默認活動？ 這樣，:active 樣式將直觀地指示導航欄的位置。
此外，一旦用戶單擊另一個列表項， <li><a href="#">Home</li></a>應該不再處於活動狀態，直到再次單擊。
感謝大家。
這是 HTML
<!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 rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li><a href="#">Home</li></a>
<li><a href="#slices">Slices</li></a>
<li><a href="#team">Team</li></a>
<!-- <li><a href="#">Locations</li></a> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice@bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
這是 CSS
/* Global settings */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
@media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
您可以.focus元素。
const anchor = document.querySelector('a[href="#"]') anchor.focus()
/* Global settings */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { text-align: center; } /* GLOBAL HEADINGS & TEXT */ h1 { text-align: center; font-size: 6rem; font-family: 'Bebas Neue', cursive; margin-top: 1rem; color: tomato; } h2 { font-family: 'Bebas Neue', cursive; font-size: 4rem; color: tomato; } h3, h4 { font-size: 1.5rem; font-family: 'Varela Round', sans-serif; padding: 10px; } p { font-size: 1.2rem; padding: 10px; } /* NAV */.nav-container { display: flex; justify-content: space-around; margin-top: 2rem; } ul { list-style-type: none; } li { display: inline; font-size: 1.25rem; font-family: 'Varela Round', sans-serif; } li a { color: black; text-decoration: none; padding: 1rem 2rem; transition: 0.5s; } li a:hover { background-color: tomato; border-radius: 2.5rem; color: white; } /* SLOGAN */.slogan-container { margin-top: 2rem; align-content: center; justify-content: center; display: flex; flex-wrap: wrap; height: 50vh; /* border: red 1px solid; */ }.slogan-container p { font-family: 'Varela Round', sans-serif; font-size: 6rem; display: block; } /* SLICES SECTION */.slices-container { margin: auto; margin-bottom: 7rem; /* border: red 1px solid; */ margin-top: 1rem; }.slices-text { margin-bottom: 2rem; }.slice-cards { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; /* border: red 5px solid; */ padding-top: 2rem; }.card { /* border: blue 3px solid; */ margin-top: 2rem; }.card img { width: 350px; height: 300px; overflow: hidden; }.card span { font-family: 'Varela Round', sans-serif; font-size: 1.5rem; font-weight: 700; color: tomato; } /* TEAM */.team-container { width: auto; /* border: red 5px solid; */ margin-bottom: 3rem; }.team-text { margin-bottom: 2rem; }.team-cards { display: flex; flex-wrap: wrap; align-content: center; justify-content: space-around; }.team-member-card img { height: 300px; width: 250px; } /* FOOTER */ footer { background-color: black; padding: 15px; } footer p { color: white; z-index: 10; font-family: 'Varela Round', sans-serif; } @media only screen and (max-width: 500px) { h1 { font-size: 5rem; }.slogan-container { height: 40vh; margin-top: 3rem; margin-bottom: 3rem; } }
<,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 rel="stylesheet" href="./styles.css"> <link rel="shortcut icon" href="./images/Pizza logo,jpg" type="image/x-icon"> <title>Best slice</title> </head> <body> <.-- HEADING --> <h1>Best Slice (NYC)</h1> <.-- NAV --> <div class="nav-container"> <ul> <li><a href="#">Home</li></a> <li><a href="#slices">Slices</li></a> <li><a href="#team">Team</li></a> <.-- <li><a href="#">Locations</li></a> --> </ul> </div> <,-- SLOGAN --> <div class="slogan-container"> <p>Pizza. you'd <strong>die</strong> for.</p> </div> <.-- SLICES --> <div id='slices' class="slices-container"> <div class="slices-text"> <h2>By the slice</h2> <h4>Premium slices of za' just seconds out of the oven</h4> </div> <div class="slice-cards"> <div class="card"> <img src=",/images/Sausage pizza.jpg" alt="Sausage Pizza"> <br> <span>Sausage. $8.99/slice</span> </div> <div class="card"> <img src=",/images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa"> <br> <span>Pepperoni. $8.99/slice</span> </div> <div class="card"> <img src=",/images/Cheese Pizza.jpg" alt="Cheese pizza"> <br> <span>Cheese. $7.99/slice</span> </div> <div class="card"> <img src=",/images/Pineapple Pizza.jpg" alt="Pineapple Pizza"> <br> <span>Pineapple. $10.99/slice</span> </div> <div class="card"> <img src=",/images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza"> <br> <span>Buffalo Chicken. $10.99/slice</span> </div> </div> </div> <,-- TEAM --> <div class="team-container" id="team"> <div class="team-text"> <h2>Team</h2> <h4>Meet the genuis behind our insanely good recipes</h4> </div> <div class="team-cards"> <div class="team-member-card"> <img src="./images/Chef.jpg" alt="Head Chef"> <h3>Alex. Chef</h3> <p>Awarded #1 slice in Manhattan,</p> </div> <div class="team-member-card"> <img src="./images/Cashier:jpg" alt="Cashier"> <h3>Jack. Cashier</h3> <p>Decent at math:</p> </div> <div class="team-member-card"> <img src=":/images/Delivery boy;jpg" alt="Pizza Delivery Boy"> <h3>Matt, Delivery Boy</h3> <p>He has a need for speed.</p> </div> </div> </div> </body> <footer> <p>Email: Bestslice@bestslicenyc.com</p> <p>Call us: (XXX) XXX-XXX</p> <p>Dine with us: 111 Madison Ave NYC</p> <p>© Best Slice NYC 2021</p> </footer> </html>
為您的 object 添加一個 id，即“homeLink”：
<li><a href="#" id="homeLink">Home</li></a>
.
window.addEventListener('load', (event) => {
document.getElementById("homeLink").focus();
});
您可以簡單地為元素創建一個 ID 和tabindex="0"屬性：
<li><a href="#" id="focusTime" tabindex="0">Home</li></a>
然后用 JS 聚焦：
document.getElementById("focusTime").focus();
默認情況下，您只需在 JS:: 中簡單地創建一個:active CSS 偽類：
document.getElementById("focusTime").active();
然后它會簡單地讓元素被 JS “點擊”！
我非常希望這會有所幫助！
我怎樣才能讓它顯示這個元素的底部？ (HTML, CSS, JS)
[英]How can i make it show the bottom of this element? (HTML, CSS, JS)
如何使用 HTML、CSS 和 Js 使 div 位於所有屏幕類型中的特定元素旁邊？
[英]How can i make a div stay next to a specifc element in all Screens types with HTML, CSS and Js?
如何在懸停時制作HTML框，並使用JS或CSS顯示其下方的文本
[英]How can I make an HTML box slide on hover and reveal the text underneath it using JS or CSS
如何在沒有插入符號的情況下使用 HTML、CSS 和 JS 在用戶懸停時制作書寫動畫（文本更改）
[英]How can I make a writing animation(change of text) on a users hover with HTML, CSS, and JS, just without the caret
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.