To keep a link active, it needs to remain in a pressed state until a new

Question

To keep a link active, it needs to remain in a pressed state until a new

I was experimenting with HTML and CSS, but I couldn't get it to function as desired.

What I am trying to achieve is that the first link/tab should appear pressed when the site is opened. It should then change to an unpressed state when another link is clicked. Additionally, there is a green line at the top which I want to change its color when a navigation tab/link is pressed simultaneously.

body {}

header {
  position: fixed;
  width: 100%;
  border-top: 5px solid #8dc63f;
  height: 120px;
  background: white;
  z-index: 1000;
  border-bottom: 2px solid #fff;
  top: 0;
}

h1 {
  font-size: 70px;
  color: red;
  padding-top: 500px;
}

h2 {
  font-size: 70px;
  color: blue;
  padding-top: 500px;
}

nav {
  position: absolute;
  right: -17px;
  bottom: 0;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: block;
  float: left;
}

nav ul li a {
  font-family: 'Open Sans', sans-serif;
  margin-right: 2px;
  color: white;
  width: 100px;
  padding: 10px;
  display: block;
  text-align: center;
  position: relative;
  text-decoration: none;
}

nav ul li a:hover {
  color: #fff;
}

nav ul li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #8dc63f;
  z-index: -1;
  transform: skew(-40deg);
  margin-bottom: -2px;
}

nav ul li a::before {
  content: '+';
}

a:hover::after {
  background: #cbda29;
}

HTML

<header>
  <nav>
    <ul>
      <li><a href="#link1">Link1</a></li>
      <li><a href="#link2">Link2</a></li>
      <li><a href="#link3">Link3</a></li>
      <li><a href="#link4">Link4</a></li>
    </ul>
  </nav>
</header>
<div id="link1">
  <h1>Hello. I am Link1. If you see this the first link/button should stay pressed/clicked/lightgreen background until
    you click another link. The top line "border-top" should change its color as well if you click a link.
  </h1>
</div>
<div id="link2">
  <h2>Oh hello i am the second link you clicked. The first button shouldn't be clicked anymore. Now link2 should appear
    as a clicked button.
  </h2>
</div>

html jquery css

Answer 1

Answer №1

When you click the navigation link, assign it a class like "active" and remove this class from any other links that are currently considered "active".

By using the appropriate CSS styling, you can also assign the same "active" class to the header.

a.active::after {
  background-color:#cbda29; 
}
header.active {
  border-top-color:#cbda29; 
}

Revised code snippet:

$("nav > ul > li > a").click(function() {
    $("a.active").removeClass("active");
    $(this).addClass("active");
    $("header").css("border-top-color", $(this).data("color"))
});

a.active::after {
  background-color:#cbda29; 
}
header.active {
  border-top-color:#cbda29; 
}

body {} // Some additional styles

// Remaining CSS styles here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="#link1" data-color="red">Link1</a></li>
      <li><a href="#link2" data-color="blue">Link2</a></li>
      <li><a href="#link3" data-color="purple">Link3</a></li>
      <li><a href="#link4" data-color="green">Link4</a></li>
    </ul>
  </nav>
</header>
<div id="link1">
  <h1>Hello. I am Link1. If you see this the first link/button should stay pressed/clicked/lightgreen background until you click another link. The top line "border-top" should change its color as well if you click a link. </h1>
</div>
<div id="link2">
  <h2>Oh hello i am the second link you clicked. The first button shouldn't be clicked anymore. Now link2 should appear as a clicked button.</h2>
</div>

Answer 2

When you click the navigation link, assign it a class like "active" and remove this class from any other links that are currently considered "active".

By using the appropriate CSS styling, you can also assign the same "active" class to the header.

a.active::after {
  background-color:#cbda29; 
}
header.active {
  border-top-color:#cbda29; 
}

Revised code snippet:

$("nav > ul > li > a").click(function() {
    $("a.active").removeClass("active");
    $(this).addClass("active");
    $("header").css("border-top-color", $(this).data("color"))
});

a.active::after {
  background-color:#cbda29; 
}
header.active {
  border-top-color:#cbda29; 
}

body {} // Some additional styles

// Remaining CSS styles here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="#link1" data-color="red">Link1</a></li>
      <li><a href="#link2" data-color="blue">Link2</a></li>
      <li><a href="#link3" data-color="purple">Link3</a></li>
      <li><a href="#link4" data-color="green">Link4</a></li>
    </ul>
  </nav>
</header>
<div id="link1">
  <h1>Hello. I am Link1. If you see this the first link/button should stay pressed/clicked/lightgreen background until you click another link. The top line "border-top" should change its color as well if you click a link. </h1>
</div>
<div id="link2">
  <h2>Oh hello i am the second link you clicked. The first button shouldn't be clicked anymore. Now link2 should appear as a clicked button.</h2>
</div>

Answer 3

Answer №2

Upon opening the site, ensure that the first link/tab appears pressed.

To achieve a different color for the first tab upon page load, apply an active class to the list item (li) to alter its color. When clicking on menu items, remember to remove/add a class like active to the corresponding li element to update the color of the menu button accordingly.

Utilize the following JavaScript code to toggle class names:

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
})

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
   $('header').css('border-top-color', 'red');
})

body {}

header {
  position: fixed;
  width: 100%;
  border-top: 5px solid #8dc63f;
  height: 120px;
  background: white;
  z-index: 1000;
  border-bottom: 2px solid #fff;
  top: 0;
}

h1 {
  font-size: 70px;
  color: red;
  font-size: 60px;
  padding-top: 500px;
}
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
...
<div id="link1">
...
<div id="link2">
...

Update after comment

Each button should have a distinct background color when clicked. This color should match the border color.

var prevClass = 'link1';
$('nav a').on('click', function() {
   var newClass = $(this).attr('id');

   if(prevClass) {
      $('header').removeClass(prevClass);
   }
   $('header').addClass(newClass);
   prevClass = newClass;
})

body {}
...

header.link1 nav li a#link1::after {
  background: red;
}
header.link2 nav li a#link2::after {
  background: yellow;
}
header.link3 nav li a#link3::after {
  background: purple;
}...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class='link1'>
...
<div id="link1">
...
<div id="link2">
...

Answer 4

Upon opening the site, ensure that the first link/tab appears pressed.

To achieve a different color for the first tab upon page load, apply an active class to the list item (li) to alter its color. When clicking on menu items, remember to remove/add a class like active to the corresponding li element to update the color of the menu button accordingly.

Utilize the following JavaScript code to toggle class names:

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
})

$('nav a').on('click', function() {
   $('nav li').removeClass('active');
   $(this).parent().addClass('active');
   $('header').css('border-top-color', 'red');
})

body {}

header {
  position: fixed;
  width: 100%;
  border-top: 5px solid #8dc63f;
  height: 120px;
  background: white;
  z-index: 1000;
  border-bottom: 2px solid #fff;
  top: 0;
}

h1 {
  font-size: 70px;
  color: red;
  font-size: 60px;
  padding-top: 500px;
}
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
...
<div id="link1">
...
<div id="link2">
...

Update after comment

Each button should have a distinct background color when clicked. This color should match the border color.

var prevClass = 'link1';
$('nav a').on('click', function() {
   var newClass = $(this).attr('id');

   if(prevClass) {
      $('header').removeClass(prevClass);
   }
   $('header').addClass(newClass);
   prevClass = newClass;
})

body {}
...

header.link1 nav li a#link1::after {
  background: red;
}
header.link2 nav li a#link2::after {
  background: yellow;
}
header.link3 nav li a#link3::after {
  background: purple;
}...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class='link1'>
...
<div id="link1">
...
<div id="link2">
...

To keep a link active, it needs to remain in a pressed state until a new

Answer №1

Answer №2

Similar questions

Implementing HTML template into Express.js for seamless web development

I am currently working with CakePHP and am interested in learning how to expire the admin session

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

Exploring the Implementation of Multiple Form Validations in SharePoint using PreSaveAction

What prevents me from calling a function while it is being defined in the prototype?

Ways to slightly tilt an image in Material-UI

Occupying the entire width of a screen

Incorporate content upon button click using Javascript

What are some ways to connect my CSS styles without encountering a MIME error?

Some inquiries regarding the fundamentals of JavaScript - the significance of the dollar sign ($) and the error message "is not a function"

A complete guide on utilizing *ngFor in Angular to display data rows

Guide to generating a dropdown menu and linking it with data received from a server

Prevent jQuery from scrolling once the fixed image reaches the bottom of the page

Hide the cursor when the text box is in focus

Tips for preventing a div from overflowing in col-md-12 in Bootstrap 3

What is the best way to ensure that a canvas created using JavaScript spans 100% of the width?

Using jQuery functionality on rendered results in Angular

Take off the wrapping from the package

What Makes Sports Illustrated's Gallery Pages Load So Quickly?

The `getScript` function in jQuery is not working as expected, even though the path is accurate and the script was successfully downloaded