CSS/HTML code for creating a dynamic border on specific pages

Question

CSS/HTML code for creating a dynamic border on specific pages

Currently, I am working on creating a border button that becomes active when you are on the corresponding page. The challenge is that when you click on a different border button, the first one's border disappears and the second one becomes visible instead. This functionality is similar to what you see on websites like this one, where buttons such as "Questions, Jobs, Documentation Beta, Tags" light up when selected while others turn off. I attempted to search for a solution on Google without success and also inspected the elements using Google Chrome's developer tools.

html css

Answer 1

Answer №1

Ensure consistency in your HTML across all pages, and then customize the appearance of each button by adding an 'active' class to the respective button on each page. Here's an example:

For the Home page

<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>

For the About page

<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>

CSS

.button {
background-color: grey;
}

.active {
background-color: orange;
}

Answer 2

Ensure consistency in your HTML across all pages, and then customize the appearance of each button by adding an 'active' class to the respective button on each page. Here's an example:

For the Home page

<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>

For the About page

<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>

CSS

.button {
background-color: grey;
}

.active {
background-color: orange;
}

Answer 3

Answer №2

To easily highlight a button on a webpage, consider adding an "active" class to that specific button.

Answer 4

To easily highlight a button on a webpage, consider adding an "active" class to that specific button.

Answer 5

Answer №3

To achieve the desired styling and functionality for an activatable element, a combination of CSS and HTML is necessary. However, if you also want this element to be activated without refreshing the page, some JavaScript will be needed as well.

$('button').on('click', function() {
  $('button').removeClass('active');
  $(this).addClass('active');
});

button.active {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="active">Active Tab</button>
<button>Inactive Tab</button>

Answer 6

To achieve the desired styling and functionality for an activatable element, a combination of CSS and HTML is necessary. However, if you also want this element to be activated without refreshing the page, some JavaScript will be needed as well.

$('button').on('click', function() {
  $('button').removeClass('active');
  $(this).addClass('active');
});

button.active {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="active">Active Tab</button>
<button>Inactive Tab</button>

CSS/HTML code for creating a dynamic border on specific pages

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to include an instance variable as a CSS rule in Rails?

Using jQuery to define and apply style attributes

Executing cssnano Using the Command Prompt

Trouble Aligning Bootstrap Dropdown Menu Link with Other Navbar Links

The issue with jqTransform not displaying the select box value on a hidden contact form

Maintaining the order of elements in Angular's insertion process

validating forms with an abundance of checkboxes

<dt> and <dd> have not been added after the previous element

Achieving full screen height at 100% with the CSS property of display: table along with table-cell tag

Attempting to modify the background hue of a grid component when a click event is triggered

The inclusion of HTTP header information within a jQuery file led to the unsuccessful loading of the jquery.js file

Use ngFor to align items to the left in your design

Transmit data from Raspberry Pi to Apache Server with strong security measures

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

AmCharts Axis renderer mistakenly renders an additional grid line

Centered Menu with Left Alignment

`.svg file appearing slightly fuzzy when magnified in Chrome``

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

Footer not positioned at the bottom of the page

Is it possible to adjust the width of the comment box on the Facebook "Like" button?