Steps to eliminate background color upon clicking on an active class

    filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
      }
    }
    
    function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }
    
    // Add active class to the current button (highlight it)
    var btnContainer = $document.getElementById("buttonContainer");
    var buttons = btnContainer.getElementsByClassName("searchButton");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("currentActive");
        current[0].className = current[0].className.replace(" currentActive", "");
        this.className += " currentActive";
      });
    }
    
        .filterDiv {
          float: left;
          margin: 2px;
          display: none;
        }
        .searchButton
        {
            list-style: none;
            display: inline-block;
        }
        .show {
          display: block;
        }
        
        .section {
          margin-top: 20px;
          overflow: hidden;
        }
        
        /* Style the buttons */
        .btn {
          border: none;
          outline: none;
          padding: 12px 16px;
          cursor: pointer;
        }

        /* animation duration */
        #animation
        {
            animation-duration: 2s;
        }

        #buttonContainer 
        {
          display: flex;
          overflow-x: auto;
        }
        
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>;
    <meta http-equiv="X-UA-Compatible" content="IE=edge>;
    <meta name="viewport" content="width=device-width, initial-scale=1.0">;
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">;
    <title>Document</title>;
</head>;

        <body>;
        
        <h2>Example</h2>;
        
        <div id="buttonContainer">;
          <li class="searchButton currentActive" onclick="filterSelection('all')"> Show&nbsp;all</li>;
          <li class="searchButton" onclick="filterSelection('sam')"> sam</li>;
          <li class="searchButton" onclick="filterSelection('john')"> john</li>;
          <li class="searchButton" onclick="filterSelection('rog')"> rog</li>;
          <li class="searchButton" onclick="filterSelection('stv')"> stv</li>;
          <li class="searchButton" onclick="filterSelection('scott')"> scott</li>;
        </div>;
        
        <div class="section">;
          <div class="filterDiv all w3-container w3-animate-bottom" id="animation">;
              <h4>What is food?</h4>;
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;

                <h4>lorem ipsum</h4>;
                            <p> lorem ipsum
                  </p>;
                            <h4>lorem ipsum</h4>;
                            <p class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
          </div>;
          <div class="filterDiv sam  w3-container w3-animate-bottom" id="animation">;
            <h4>lorem ipsum</h4>;
                            <p>   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
                            <h4 >What is the Cricket Live Scores API?</h4>;
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
                             </p>;
          </div>;
          
          <div class="filterDiv john  w3-container w3-animate-bottom" id="animation">;
            <h4>lorem ipsum</h4>;
            <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
                <h4>lorem ipsum</h4>;
                <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
          </div>;
          <div class="filterDiv rog  w3-container w3-animate-bottom" id="animation">;
            <h4>lorem ipsum</h4>;
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
          </div>;
          <div class="filterDiv stv  w3-container w3-animate-bottom" id="animation">;
            <h4>lorem ipsum</a></h4>;
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>;
          </div>;
        </div>;
</body>;

</html>
;

https://i.sstatic.net/ydKeC.jpg

The provided image was captured on my mobile phone.

  1. I am seeking guidance on removing the blue color that appears in the background when clicking on any of the list tags. The color was not added through CSS.
  2. I attempted using focus and active in my CSS but had no success.
  3. I aim to achieve a similar layout as depicted in the following picture.

https://i.sstatic.net/qGecb.jpg

While exploring W3Schools, I came across data filtering examples which inspired me to try one myself. However, I am facing a challenge with understanding the source of the blue color visible in the images.

htmlcssresponsive-designw3.cssdata-filtering

Answer №1

Learn how to utilize dataset attributes in conjunction with JavaScript to adjust the movement percentage of the ROOT element and relocate your HR below the list-item buttons.

In your HTML, position the HR below the LI elements and then you can use CSS to target the HR with a unique selector for each button using the general sibling selector ~. Style the HR element as absolute with specific width and background color attributes, and position it by adjusting the left property on hover of each button element .show-all:hover ~ hr.

Define the original value of the HR's left property using a CSS variable:

:root {
  --active: 24px;
}

Set the HR element's left property to the CSS variable:

  left: var(--active);

Add the following line to the JS function that applies the active class: 

document.documentElement.style.setProperty('--active', this.dataset.active)
. This will set the clicked buttons' offset percentage to the HR's active variable in the page's style for the HTML element, based on the percentage specified in the data.active attribute.

To evenly space out the buttons, include justify-content: space-around in the CSS. Otherwise, additional code would be needed to adjust the size of the HR element on hover...

Please note that there may be some padding or margin issues when clicking the last buttons. However, this approach gives you a solid foundation for achieving the desired active effect.

Explore the sample code snippet provided below for practical implementation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unsure about the process for submitting multiple tag inputs

I stumbled upon a YouTube tutorial that guided me on creating a multiple tag input field, but I hit a roadblock when trying to save the inputs (as JSON) to my Django models. Since I am relatively new to JavaScript, I'm at a loss on how to proceed. My ...

javascripthtmljqueryajaxforms

The right float property is malfunctioning

As a beginner in web development, I am attempting to recreate this website from scratch. However, I have hit a roadblock. I'm currently facing an issue with the float: left property (within @media). I double-checked by including box-sizing: border-b ...

htmlcsscss-float

Steps to update the text of the button that is currently selected within an ngFor loop:

Currently, I am using an ngFor loop to display multiple membership options. My goal is to modify the text inside each button from 'select' to 'selected' once a user has made their choice. However, the issue I'm facing is that when ...

htmlangulartypescript

I am having trouble with the CSS Hover and Active styling on my website

Below is the code for my navigation bar: <ul> <li><a href="index.html">HOME</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="resources.html">RESOURCES</a ...

htmlcss

Navigate between tabs with a single click

Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...

javascripthtmlcss

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

Vanishing Submit Button with CSS

In my input submit button, I have included the following code: <input class="buttons" type="button" onclick="javascript:jQuery(xxxx)" style="font-size: 12px;" value="Invite to Bid"> Additionally, there is a CSS function that adds an elegant "Go" im ...

htmlcss

How can I modify the "value" attribute of options in a select box generated with MySQL and PHP in HTML?

My select box is populated with options from a MySQL database using PHP, which means I cannot directly specify a "value" attribute for each option like this: <option value="CCFFFF">light blue Instead, my select box is generated dynamically as shown ...

javascriptphpjqueryhtmlmysql

Overlaying images with non-rectangular shapes

I am struggling to achieve a specific design for my bootstrap card. The card is filled with an image and I have placed text on top of it, which is made visible by using a transparent overlay. I would like the overlay to be slanted, similar to the effect se ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize AngularJS $sanitize to convert characters into HTML code

When attempting to decode characters using $sanitize, I encountered a problem. I must use the $sanitize service instead of ng-bind-html, yet I am getting different results with each one. Despite ng-bind-html utilizing $sanitize internally, the outputs are ...

javascripthtmlangularjs

Changing the image source using Javascript and extracting part of the URL

i'm attempting to extract the image url from a series of urls in a loop, removing the hash portion () without the hash (?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ). I've managed to mak ...

javascripthtmlloopsiterator

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

csshtml

Striving to incorporate a Facebook like button onto a Sencha toolbar

The issue I'm facing is that the like button isn't visible on my webpage. Here's a snippet of the code: HTML file : . . . <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElem ...

javascripthtmlsencha-touchsencha-touch-2

When attempting to advance to the next page using Selenium, the link does not properly load the subsequent page

I have recently started exploring selenium and web scraping, attempting to retrieve information from the following link: Below is a segment of the code I am utilizing: while max_pages > 0: results.extend(extract_content(driver.page_sou ...

pythonhtmlseleniumxpathweb-crawler

What is the best way to narrow down the content cards displayed on the page?

I have recently developed a blog post featuring three distinct categories: digital marketing, tips and advice, and cryptocurrency. My goal is to implement a filtering system for these categories. For instance, I would like users to be able to click on a b ...

javascripthtmlfiltering

Utilize jQuery to apply a CSS class to the element that is clicked and inject additional content into a designated div

Here is a link to a page where I am experimenting with creating an interactive choose-your-own-adventure story: My goal is to add the class "disabled" to the element when a user clicks on the word "stairs" and then continue the story. Below is the relevan ...

jqueryhtmlcss

What is the best way to dynamically display CSS code from a PHP variable without needing to refresh the

I am working on a page that utilizes ajax and PHP for all functions. Within the tab content, users have the option to select colors using color pickers. Once a user saves their chosen colors, I store the new CSS code in the database. The CSS code is as ...

phpcssajax

Building a sleek and responsive navigation bar using HTML, CSS, and Bootstrap is

As a newcomer to programming and completely new to HTML, I am currently working on a class project for my Web Development course. The task involves creating a webpage for a fictional company named "DW Gift Company." One of the requirements for this project ...

htmlcssbootstrap-4navbaradobe-brackets

What is the best way to include a class in the <td> element of a dynamic table?

My goal is to sum up the values in a specific column of a dynamic table by attaching an id property to each row. I am specifically focused on assigning an id to each <td> in every row of the table. UPDATE: Although I have all 4 keys in the <td> ...

javascripthtml

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

phpjavascripthtml