html
 
 
Copy code
<!-- HTML Code for a menu bar -->
<nav>
  <ul>
    <li><a href="#">Research</a></li>
    <li><a href="#">People</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">Internships</a></li>
  </ul>
</nav>

css
 
 
Copy code
/* CSS Code to style the menu bar */
nav {
  background-color: #333; /* Sets the background color */
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

javascript
 
 
Copy code
/* JavaScript code for active menu item */
var navItems = document.querySelectorAll("nav ul li a");

for(var i = 0; i < navItems.length; i++) {
  if(navItems[i].href === window.location.href) {
    navItems[i].className = "active";
  }
}

To activate a tab based on the day of the week and add a class of "w--current" to the active tab, you can use JavaScript and jQuery. Here's an example code on how to achieve this:

javascript
 
 
Copy code
$(document).ready(function() {
  // Get the current day of the week
  var today = new Date().getDay();

  // Activate the corresponding tab and add the "w--current" class
  $('.tab:nth-child(' + (today + 1) + ')').addClass('w--current');
});

In this example, we're using jQuery to select the tab that corresponds to the current day of the week. The today variable gets the current day of the week, where Sunday is 0 and Saturday is 6. We then select the tab that corresponds to the current day by using the nth-child selector, and add the "w--current" class to it using the addClass method.

Note that this code assumes that the tabs are in order from Monday to Sunday. If they're in a different order, you'll need to adjust the code accordingly.

To make the click on a button visible you can add a CSS style to change the appearance of the button when it is clicked. You can do that by using the :active pseudo-class.

For example, if you want to change the color of the button to blue when it is clicked, you can use this CSS code:

css
 
 
Copy code
button:active {
  background-color: blue;
}

This code will select any button elements that are currently being clicked, and change their background-color property to blue.

Here's an example of how this could look like in HTML and CSS:

html
 
 
Copy code
<button>Click me</button>

css
 
 
Copy code
button:active {
  background-color: blue;
}

When the button is clicked, its background color will change to blue, and then revert back to its original color once the click is released.

css
 
 
Copy code
a {
  color: blue; 
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

In CSS, the :focus selector is used to select the element that has focus. The :focus pseudo class is applied when an element is in the process of being selected/clicked/activated by keyboard or mouse.

The :active selector is used to select active elements. An active element is one that has been activated by the user and is in process of being activate, or is being activated and has not been deactivated yet. For example, when a link is clicked.

For more information see:

• CSS focus pseudo-class
• CSS active pseudo-class