Home > front end >  How can I use HTML, CSS, or JS to make an element active by default?
How can I use HTML, CSS, or JS to make an element active by default?

Time：11-20

I would like for <li><a href="#">Home</li></a> to be automatically active when a user arrives at my page.

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? That way, the :active style will visually indicate the location of the nav bar.

Also, once the user clicks on another list item, <li><a href="#">Home</li></a> should no longer be active until clicked again.

Thanks, everyone.

Here is the 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: [email protected]</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

/* 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;
    }
}

CodePudding user response：

You can .focus the element.

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: [email protected]</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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add an id to your object, es "homeLink":

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

.

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

CodePudding user response：

FIRST METHOD:

You can just simply make an ID and tabindex="0" attribute for the element:

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

And then focus it with JS:

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

SECOND METHOD:

You can just simply make an :active CSS pseudo-class by default only in JS!:

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

And then it'll simply make the element "clicked" by JS!

I hope very much this helps!

Page link：https//www.codepudding.com/frontend/198594.html

Prev:How to load part of html page in django?
Next:Having issues with app.post, results in Cannot Get /
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding