Browsed through the CSS impact panels

Question

Browsed through the CSS impact panels

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 20px;
}
.Tab1:hover {
  border: 2px solid #8CC63F;
}
.Tab1:visited {
  border: 2px solid #8CC63F;
}
.Tab2 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons3.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 20px;
}
.Tab2:hover {
  border: 2px solid #8CC63F;
}

<ul>
  <li class="Tab1"></li>
  <li class="Tab2"></li>
</ul>

I have created a list with tabs, but I'm having trouble getting the selected item to display a border of 2px solid #8CC63F.

I've tried some solutions in the code section, but it doesn't seem to be working as expected. Can anyone help me figure out what's wrong?

Your assistance is greatly appreciated!

html css

Answer 1

Answer №1

It appears that the issue lies in using the :visited selector, which is typically used for anchor tags (<a>).

To apply this functionality to list elements, you can simply add a class on click.

var listArray = document.querySelectorAll("[class^=Tab]");

function setVisited() {
  this.classList.add("visited")
}

for ( var list = 0; list < listArray.length;  list++) {
  listArray[list].addEventListener("click", setVisited , false)
}

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover,ul li.visited{border:2px solid #8CC63F;}

<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>

You can achieve the same effect with jQuery as well:

$("[class^=Tab]").click(function(){$(this).addClass("visited")})

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover{border:2px solid #8CC63F;}
ul li.visited{border:2px solid #8CC63F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>

Answer 2

It appears that the issue lies in using the :visited selector, which is typically used for anchor tags (<a>).

To apply this functionality to list elements, you can simply add a class on click.

var listArray = document.querySelectorAll("[class^=Tab]");

function setVisited() {
  this.classList.add("visited")
}

for ( var list = 0; list < listArray.length;  list++) {
  listArray[list].addEventListener("click", setVisited , false)
}

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover,ul li.visited{border:2px solid #8CC63F;}

<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>

You can achieve the same effect with jQuery as well:

$("[class^=Tab]").click(function(){$(this).addClass("visited")})

ul li{border:2px solid transparent; margin-bottom: 10px}
ul li:hover{border:2px solid #8CC63F;}
ul li.visited{border:2px solid #8CC63F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="Tab1">Tab1</li>
  <li class="Tab2">Tab2</li>
</ul>

Browsed through the CSS impact panels

Answer №1

Similar questions

The button refuses to navigate to a URL upon being clicked

Is there a way to create a gradual fading effect on my images?

Design a square confined within an adjustable rectangular container

Is enclosing a div around HTML5 semantic elements a good practice?

Deliver static assets integrated within Express using HTML template

Incorporate a section of text to flow around a floated image within a paragraph

Clickable element with embedded URL and functionality

The recommended style guide for HTML documentation advises using spaces within the <code> tags

Organize Divs - Arrange each div below its corresponding image using JavaScript and jQuery

Ways to display or conceal form controls when altering select box choices

Is it possible to swap the src of the Next.Js Image Component dynamically and incorporate animations in the

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

css how to style a table row with a specific identifier

Eliminate HTML field based on checkbox status

Designing a solid sidebar of a specific width alongside a flexible container for content that adapts to different screen sizes using

Animating text-shadow color in CSS from left to right

Tips for validating multiple forms on a single page without altering the JavaScript validation structure

Is it necessary for CSS Media query to load all the referenced CSS files?

Turn the process of transforming a .createElement("image") into a clickable link

Is it possible for me to connect one element to another using CSS or JavaScript?