Is there a way to have a span update its color upon clicking a link?

Question

Is there a way to have a span update its color upon clicking a link?

I have 4 Spans and I'm looking to create an interactive feature where clicking a link in a span changes the color of that span. Additionally, when another link in a different span is clicked, the color of that span changes while reverting the previously clicked span back to its original color. I know this might sound confusing, but please bear with me. Below is some JavaScript code I found from another user's question. I've tried modifying it to suit my needs without much success. As a beginner in JavaScript, any tips or assistance would be greatly appreciated. Thank you in advance!

<script>
$(document).ready(function() {
        $("#sec1").click(function() {
            $("#sec1").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

CSS:
#sec1 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:0;  background: rgb(238,238,238); /* Old browsers */
background: #7d7e7d; /* Old browsers */
...

html:
<span id="sec1" class="box"><a href="" class="one""><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>
<span id="sec2" class="box"><a href="" class="two""><p style="margin-top:2.5vh; font-size:1.25em"><b>MUSIC</b></p></a></div>
<span id="sec3" class="box" ><a href="" class="three""><p style="margin-top:2.5vh; font-size:1.25em"><b>RADIO</b></p></a></div>
<span id="sec4" class="box"><a href="" class="four"><p style="margin-top:2.5vh; font-size:1.25em"><b>COMICS</b></p></a></div>

javascript jquery html css

Answer 1

Answer №1

Consider using the box class selector instead of IDs for a more streamlined HTML structure.

$(document).ready(function() {
  var $boxes = $(".box").click(function() {
    $boxes.removeClass('active');
    $(this).addClass('active');
  });
});

a {color: #ffffff; text-decoration:none; font-family:arial;}
.box {
  color: #ffffff;
  background: rgb(238, 238, 238);
  /* Old browsers */
  background: #7d7e7d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* IE10+ */
  background: linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
  /* IE6-9 */
  ;
  display: inline-block;
  padding:10px 20px;
  white-space: nowrap;
}
.active  {
  background: #aaa;
}

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

<span id="sec1" class="box">
  <a href="#" class="one"style="margin-top:2.5vh; font-size:1.25em;">
      MOVIES
  </a>
 </span>

<span id="sec2" class="box">
  <a href="#" class="two" style="margin-top:2.5vh; font-size:1.25em">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#" class="three" style="margin-top:2.5vh; font-size:1.25em">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#" class="four" style="margin-top:2.5vh; font-size:1.25em">
    COMICS
  </a>
</span>

Answer 2

Consider using the box class selector instead of IDs for a more streamlined HTML structure.

$(document).ready(function() {
  var $boxes = $(".box").click(function() {
    $boxes.removeClass('active');
    $(this).addClass('active');
  });
});

a {color: #ffffff; text-decoration:none; font-family:arial;}
.box {
  color: #ffffff;
  background: rgb(238, 238, 238);
  /* Old browsers */
  background: #7d7e7d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* IE10+ */
  background: linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
  /* IE6-9 */
  ;
  display: inline-block;
  padding:10px 20px;
  white-space: nowrap;
}
.active  {
  background: #aaa;
}

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

<span id="sec1" class="box">
  <a href="#" class="one"style="margin-top:2.5vh; font-size:1.25em;">
      MOVIES
  </a>
 </span>

<span id="sec2" class="box">
  <a href="#" class="two" style="margin-top:2.5vh; font-size:1.25em">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#" class="three" style="margin-top:2.5vh; font-size:1.25em">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#" class="four" style="margin-top:2.5vh; font-size:1.25em">
    COMICS
  </a>
</span>

Answer 3

Answer №2

Your posted markup has some issues that need fixing.

One problem is that you opened a span tag <span>, but then mistakenly closed it as a div </div>. It should be closed as a span instead. </span>:

<span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>

Additionally, the href attributes should point to a hash to prevent page redirection.

(Replace all instances of href="" with href="#")

Here's a simple solution to achieve what you want. Although it includes repeated code (not DRY), it demonstrates the concept clearly. The JavaScript, CSS, and HTML have been simplified:

JavaScript

$(document).ready(function() {

  // click box 1
  $("#sec1").click(function() {
    $(this).addClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });

  // click box 2
  $("#sec2").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 3
  $("#sec3").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 4
  $("#sec4").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
  });  

});

CSS

.box {
  text-align:center;
  top:9vh;
  left:0;
  background-color: #7d7e7d;
  display:inline;
  white-space:nowrap;
  overflow:hidden;
  margin: 3px;
  padding: 3px;
}

.active {
  background-color: green;
}

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<span id="sec1" class="box">
  <a href="#">
    MOVIES
  </a>
</span>

<span id="sec2" class="box">
  <a href="#">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#">
    COMICS
  </a>
</div>

</body>
</html>

http://jsbin.com/riranefuri/edit?html,css,js,output

Answer 4

Your posted markup has some issues that need fixing.

One problem is that you opened a span tag <span>, but then mistakenly closed it as a div </div>. It should be closed as a span instead. </span>:

<span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>

Additionally, the href attributes should point to a hash to prevent page redirection.

(Replace all instances of href="" with href="#")

Here's a simple solution to achieve what you want. Although it includes repeated code (not DRY), it demonstrates the concept clearly. The JavaScript, CSS, and HTML have been simplified:

JavaScript

$(document).ready(function() {

  // click box 1
  $("#sec1").click(function() {
    $(this).addClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });

  // click box 2
  $("#sec2").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 3
  $("#sec3").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 4
  $("#sec4").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
  });  

});

CSS

.box {
  text-align:center;
  top:9vh;
  left:0;
  background-color: #7d7e7d;
  display:inline;
  white-space:nowrap;
  overflow:hidden;
  margin: 3px;
  padding: 3px;
}

.active {
  background-color: green;
}

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<span id="sec1" class="box">
  <a href="#">
    MOVIES
  </a>
</span>

<span id="sec2" class="box">
  <a href="#">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#">
    COMICS
  </a>
</div>

</body>
</html>

http://jsbin.com/riranefuri/edit?html,css,js,output

Answer 5

Answer №3

To easily switch classes in a group of span elements, remove the class from all spans and then add it to the one that is clicked on.

<script>
$(document).ready(function() {
        $("span.box").click(function() {
            $("span.box").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

If you want to navigate through different pages using anchor tags, make sure to assign the "active" class to the appropriate link using server-side programming rather than JavaScript.

Answer 6

To easily switch classes in a group of span elements, remove the class from all spans and then add it to the one that is clicked on.

<script>
$(document).ready(function() {
        $("span.box").click(function() {
            $("span.box").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

If you want to navigate through different pages using anchor tags, make sure to assign the "active" class to the appropriate link using server-side programming rather than JavaScript.

Is there a way to have a span update its color upon clicking a link?

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the source of the "Unexpected token ;" issue in an Express-JS application

The target for CountUp is not defined in React.js and is either null or undefined

I am having trouble retrieving the Post values that were sent using jQuery ajax

My React component is experiencing issues with the Console.log functionality

What is the process for adding parameters to a Fetch GET request?

How can I programmatically close the Date/Time Picker in Material UI Library?

Delicate seams break up the different sections of the webpage

Trigger a JavaScript function on a body click, specifically targeting certain elements to be excluded

What is the best way to begin an ordered list from the number 2 instead of 1, while ensuring W3C validity and compatibility with

GWT 2.5.1 - How to Restrict the Amount of Items Displayed in a Dropdown Menu (ValueListBox)

Are cookies always included in client requests?

How to eliminate rows with images in Exceljs

A step-by-step guide on transferring data from an HTML file to MongoDB using Python Flask

Tips for increasing the size of Material-ui Rating icons

The persistent state is not being saved correctly by Redux-Persist and is instead returning the initial

I wish to trigger the function when the button with the ID "add_city" is clicked instead of it being activated upon pressing the Enter key as it currently is

Accessing XML data using Cross-Domain AJAX

Version 2: "In case of an empty input field, the submit button should be

Ways to style text using variables in SASS without using quotation marks

Leveraging PHP for parsing an HTML document