Question 199623 in Html Question posted in
Some basic documentation can be found here.

Html – when click the menu change the ::after background

how can i change the color of ::after pseudo-element when i click the a tag?

this is my html code:

<div class="menu">
  <div class="row" style="justify-content: center;">
       <div class="menu-item">
          <a href="" class="row" id="border" onclick="change(0)">
              <span>home</span>
            

          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row" id="border" onclick="change(1)">
              <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
             
          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row" id="border"  onclick="change(2)">
              <span>expert solutions</span>
  
          </a>
       </div>
   </div>
</div>

and this is my css code:

:root
{
    --background-border-menu: red;
}
.menu
{
    width: 328px;
    background-color: blue;
}
.menu-item
{
    height: 70px;
    background-color: blanchedalmond;
    margin:0 5px;
}
.menu-item a
{
    position: relative;
    height: 70px;
    padding: 5px;
    font-size: 0.875rem;
    text-transform: capitalize;
    color: #2e3856;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight: 600;
}

.menu-item a::after
{ 
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.3rem;
    background-color: var(--background-border-menu);
    bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
}

and this is my js code:

function change(i)
{
    var item = document.querySelectorAll("#border");
    item[i].style.setProperty("--background-border-menu" , "blue");
}

I want when I click on one of my items, only that item’s change the a::after background color
When I click, it changes, but I don’t know how to remove the previous item

Tags:

3

Answers


  1. 0 
    function change(i) {
    var items = document.querySelectorAll("#border");
    items.forEach(item => {
        item.style.setProperty("--background-border-menu", "initial");
    });
    items[i].style.setProperty("--background-border-menu", "blue");
}
    Login or Signup to reply.
  2. 0 
    let currentItem = null;
function change(i) {
  const items = document.querySelectorAll("#border");
  if (currentItem !== null) {
    currentItem.style.setProperty("--background-border-menu", "red");
  }
  const clickedItem = items[i];
  clickedItem.style.setProperty("--background-border-menu", "blue");
  currentItem = clickedItem;
}
    Login or Signup to reply.
  3. 0

    I have written a small library to be able to create/modify/remove css rules. Here’s an example of how to use it to toggle a css variable (from :root).

    const cssEditFactory = window.LifeStyleFactory;
delete window.LifeStyleFactory;

let currentColor = `green`;
const modifyCss = cssEditFactory({createWithId: `myCustomStylesheet`});

// create 2 rules
[`:root { --my-color: ${currentColor}; }`,
 `.testColorChanger { color: var(--my-color); }`]
.forEach(rule => modifyCss(rule));  

// add a handler
document.addEventListener(`click`, handle);

// create some divs with class testColorChanger
const divs = [...Array(10)].map( _ => 
  `<div class="testColorChanger">
    Click me to toggle the color of all divs.testColorChanger
   </div>`);
document.body.insertAdjacentHTML(`beforeend`, divs.join(``));

function handle(evt) {
  console.log(evt.target);
  if (evt.target.classList.contains(`testColorChanger`)) {
    let current = currentColor;
    // toggle color
    currentColor = current === `green` ? `blue` : `green`;

    // rewrite the css rule
    modifyCss(`:root { --my-color: ${currentColor}; }`);

    // report the text of the current rule
    console.clear();
    console.log(document.querySelector(`#myCustomStylesheet`)
      .sheet.rules[0].cssText);
  }
}
    <script src="https://kooiinc.github.io/LifeCSS/index.browser.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search