堆栈内存溢出
  简体   繁体   English

如何使用 HTML、CSS 或 JS 使元素默认处于活动状态？

[英]How can I use HTML, CSS, or JS to make an element active by default?

 原文  2021-11-19 23:58:36  8   3    javascript/ html/ css

问题描述

I would like for <li><a href="#">Home</li></a> to be automatically active when a user arrives at my page.我希望<li><a href="#">Home</li></a>在用户到达我的页面时自动激活。

Is there any way to use css, html, or js to set a link to active by default when the user initially arrives at the site?当用户最初到达站点时，有什么方法可以使用 css、html 或 js 将链接设置为默认活动？ That way, the:active style will visually indicate the location of the nav bar.这样，:active 样式将直观地指示导航栏的位置。

Also, once the user clicks on another list item, <li><a href="#">Home</li></a> should no longer be active until clicked again.此外，一旦用户单击另一个列表项， <li><a href="#">Home</li></a>应该不再处于活动状态，直到再次单击。

Thanks, everyone.感谢大家。

Here is the HTML这是 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>&copy; Best Slice NYC 2021</p>
</footer>

</html>

Here is the CSS这是 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;
    }
}

3 个解决方案

解决方案1
 2  2021-11-20 00:03:22

You can .focus the element.您可以.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>&copy; Best Slice NYC 2021</p> </footer> </html>

解决方案2
 0  2021-11-20 00:04:28

Add an id to your object, es "homeLink":为您的 object 添加一个 id，即“homeLink”：

<li><a href="#" id="homeLink">Home</li></a>

. .

window.addEventListener('load', (event) => {
  document.getElementById("homeLink").focus();
});

解决方案3
 0  2021-11-20 09:05:39

FIRST METHOD:第一种方法：

You can just simply make an ID and tabindex="0" attribute for the element:您可以简单地为元素创建一个 ID 和tabindex="0"属性：

<li><a href="#" id="focusTime" tabindex="0">Home</li></a>

And then focus it with JS:然后用 JS 聚焦：

document.getElementById("focusTime").focus();

SECOND METHOD:第二种方法：

You can just simply make an :active CSS pseudo-class by default only in JS::默认情况下，您只需在 JS:: 中简单地创建一个:active CSS 伪类：

document.getElementById("focusTime").active();

And then it'll simply make the element "clicked" by JS!然后它会简单地让元素被 JS “点击”！

I hope very much this helps!我非常希望这会有所帮助！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我怎样才能让它显示这个元素的底部？ (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? Vue.js：如何使动态创建的 HTML 使用范围为 CSS？ - Vue.js: How can I make dynamically created HTML use scoped CSS? 我如何将 Django 与 html CSS JS 一起使用？ - how can i use Django with html CSS JS? 如何使用JS创建具有ID的HTML元素？ - How can I use JS to create a HTML element with a ID? 如何使用数组和 JS 替换 html 元素中的类？ - How can I use arrays and JS to replace classes in a html element? 如何在 HTML/CSS 中制作计数器 - How can I make a counter in HTML/CSS Vue JS - 如何滚动（焦点）到“活动”li 元素？ - Vue JS - How can i scroll (focus) to the 'Active' li element? 如何在悬停时制作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
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM