点击菜单时更改 ::after 背景

huangapple
go评论106阅读模式
英文:

when click the menu change the ::after background

问题

  1. .menu-item a::after
  2. { 
  3.     /* ... */
  4.     background-color: var(--background-border-menu);
  5.     /* ... */
  6. }
  1. function change(i)
  2. {
  3.     var item = document.querySelectorAll("#border");
  4.     item[i].style.setProperty("--background-border-menu" , "blue");
  5. }
英文:

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

this is my html code:

  1. <div class="menu">
  2.   <div class="row" style="justify-content: center;">
  3.        <div class="menu-item">
  4.           <a href="" class="row" id="border" onclick="change(0)">
  5.               <span>home</span>
  6.             
  8.           </a>
  9.        </div>
  11.        <div class="menu-item">
  12.           <a href="" class="row" id="border" onclick="change(1)">
  13.               <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
  14.              
  15.           </a>
  16.        </div>
  18.        <div class="menu-item">
  19.           <a href="" class="row" id="border"  onclick="change(2)">
  20.               <span>expert solutions</span>
  21.   
  22.           </a>
  23.        </div>
  24.    </div>
  25. </div>

and this is my css code:

  1. :root
  2. {
  3.     --background-border-menu: red;
  4. }
  5. .menu
  6. {
  7.     width: 328px;
  8.     background-color: blue;
  9. }
  10. .menu-item
  11. {
  12.     height: 70px;
  13.     background-color: blanchedalmond;
  14.     margin:0 5px;
  15. }
  16. .menu-item a
  17. {
  18.     position: relative;
  19.     height: 70px;
  20.     padding: 5px;
  21.     font-size: 0.875rem;
  22.     text-transform: capitalize;
  23.     color: #2e3856;
  24.     font-family: 'Pathway Extreme', sans-serif;
  25.     font-weight: 600;
  26. }
  28. .menu-item a::after
  29. { 
  30.     position: absolute;
  31.     content: " ";
  32.     width: 100%;
  33.     height: 0.3rem;
  34.     background-color: var(--background-border-menu);
  35.     bottom: 0;
  36.     border-top-left-radius: 5px;
  37.     border-top-right-radius: 5px;
  38.     left: 0;
  39. }

and this is my js code:

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

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

答案1

得分: 1

编辑一个在 :root 中定义的变量，就像这样。这 消除了在处理程序中使用循环的需要。这里有一个最小可复制的示例。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. document.addEventListener(`click`, handle);
  5. const rootRule = getRootRule();
  6. let defaultColor = "red";
  8. createSomeDivs();
  10. function handle(evt) {
  11.   if (evt.target.classList.contains(`testColor`)) {
  12.     defaultColor = defaultColor === `red` ? `green` : `red`;
  13.     rootRule.setProperty(`--test-color`, defaultColor);
  14.   }
  15. }
  17. function createSomeDivs() {
  18.   const divs = [...Array(10)].map((_, i) => {
  19.     const isEven = i % 2 == 0;
  20.     return `<div class="${isEven ? `testColor` : `none`}">
  21.       ${isEven ? ` ` : `I'm just a div`}
  22.      </div>`;
  23.   });
  24.   document.body.insertAdjacentHTML(`beforeend`, divs.join(``))
  25. }
  27. function getRootRule() {
  28.   return [...document.styleSheets[0].rules]
  29.     .find(rule => 
  30.       rule.cssText.trim().startsWith(`:root`))?.style;
  31. }
  33. <!-- language: lang-css -->
  35. :root {
  36.   --test-color: red;
  37. }
  39. .testColor:after {
  40.   content: "click me!";
  41.   color: var(--test-color);
  42.   cursor: pointer;
  43. }
  45. <!-- end snippet -->

或者使用这个小型库我写的。它可以创建/修改/删除CSS规则。以下是如何使用它来切换CSS变量（来自 :root）的示例。

  1. <!-- begin snippet: js hide: true console: true babel: false -->
  3. <!-- language: lang-js -->
  4. const cssEditFactory = window.LifeStyleFactory;
  5. delete window.LifeStyleFactory;
  6. const modifyCss = cssEditFactory({createWithId: `myCustomStylesheet`});
  7. let currentColor = `green`;
  9. // 添加一个处理程序（事件委托）
  10. document.addEventListener(`click`, handle);
  12. setStyleAndCreateDivs(currentColor);
  14. function handle(evt) {
  15.   if (evt.target.classList.contains(`testColorChanger`)) {
  16.     let current = currentColor;
  17.     // 切换颜色
  18.     currentColor = current === `green` ? `blue` : `green`;
  20.     // 重写CSS规则
  21.     modifyCss(`:root { --my-color: ${currentColor}; }`);
  23.     // 报告当前规则的文本
  24.     console.clear();
  25.     console.log(document.querySelector(`#myCustomStylesheet`)
  26.       .sheet.rules[0].cssText);
  27.   }
  28. }
  30. function setStyleAndCreateDivs(currentColor) {
  31.   // 创建2个规则
  32.   [`:root { 
  33.       --my-color: ${currentColor}; 
  34.       --test-hover-color: orange; }`,
  35.    `.testColorChanger::after { 
  36.       color: var(--my-color);
  37.       content: ' I am div.testColorChanger::after. Click me! \0C';
  38.       box-shadow: 1px 2px 5px #ccc;
  39.       border-radius: 4px;
  40.       margin: 0.8rem 0;
  41.       cursor: pointer;
  42.     }`,
  43.     `.testColorChanger:hover:after {
  44.       color: var(--test-hover-color);
  45.     }`,
  46.     `div:hover {
  47.       color: red;
  48.     }`]
  49.   .forEach(rule => modifyCss(rule));  
  50.   
  51.   // 创建一些带有class testColorChanger的div
  52.   const divs = [...Array(10)].map((_, i) => {
  53.     const isEven = i % 2 == 0;
  54.     return `<div class="${isEven ? `testColorChanger` : `none`}">
  55.       ${isEven ? ` ` : `I'm just a div`}
  56.      </div>`;
  57.   });
  58.   document.body.insertAdjacentHTML(`beforeend`, divs.join(``));
  59. }
  61. <!-- language: lang-html -->
  63. <script src="https://kooiinc.github.io/LifeCSS/index.browser.js"></script>
  65. <!-- end snippet -->
英文:

Edit a variable defined in :root like this. It nullifies the need for a loop in the handler. Here's a minimal reproducable example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.addEventListener(`click`, handle);
  2. const rootRule = getRootRule();
  3. let defaultColor = &quot;red&quot;;
  5. createSomeDivs();
  7. function handle(evt) {
  8.   if (evt.target.classList.contains(`testColor`)) {
  9.     defaultColor = defaultColor === `red` ? `green` : `red`;
  10.     rootRule.setProperty(`--test-color`, defaultColor);
  11.   }
  12. }
  14. function createSomeDivs() {
  15.   const divs = [...Array(10)].map( (_, i) =&gt; {
  16.     const isEven = i % 2 == 0;
  17.     return `&lt;div class=&quot;${isEven ? `testColor` : `none`}&quot;&gt;
  18.       ${isEven ? ` ` : `I&#39;m just a div`}
  19.      &lt;/div&gt;`;
  20.      });
  21.   document.body.insertAdjacentHTML(`beforeend`, divs.join(``))
  22. }
  24. function getRootRule() {
  25.   return [...document.styleSheets[0].rules]
  26.     .find(rule =&gt; 
  27.       rule.cssText.trim().startsWith(`:root`))?.style;
  28. }

<!-- language: lang-css -->

  1. :root {
  2.   --test-color: red;
  3. }
  5. .testColor:after {
  6.   content: &quot;click me!&quot;;
  7.   color: var(--test-color);
  8.   cursor: pointer;
  9. }

<!-- end snippet -->

Or use this small library I've written. It enables creation/modification/removal of css rules. Here's an example of how to use it to toggle a css variable (from :root).

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. const cssEditFactory = window.LifeStyleFactory;
  2. delete window.LifeStyleFactory;
  3. const modifyCss = cssEditFactory({createWithId: `myCustomStylesheet`});
  4. let currentColor = `green`;
  6. // add a handler (event delegation)
  7. document.addEventListener(`click`, handle);
  9. setStyleAndCreateDivs(currentColor);
  11. function handle(evt) {
  12.   if (evt.target.classList.contains(`testColorChanger`)) {
  13.     let current = currentColor;
  14.     // toggle color
  15.     currentColor = current === `green` ? `blue` : `green`;
  17.     // rewrite the css rule
  18.     modifyCss(`:root { --my-color: ${currentColor}; }`);
  20.     // report the text of the current rule
  21.     console.clear();
  22.     console.log(document.querySelector(`#myCustomStylesheet`)
  23.       .sheet.rules[0].cssText);
  24.   }
  25. }
  27. function setStyleAndCreateDivs(currentColor) {
  28.   // create 2 rules
  29.   // \F60A
  30.   [`:root { 
  31.       --my-color: ${currentColor}; 
  32.       --test-hover-color: orange; }`,
  33.    `.testColorChanger::after { 
  34.       color: var(--my-color);
  35.       content: &#39; I am div.testColorChanger::after. Click me! \0C&#39;;
  36.       box-shadow: 1px 2px 5px #ccc;
  37.       border-radius: 4px;
  38.       margin: 0.8rem 0;
  39.       cursor: pointer;
  40.     }`,
  41.     `.testColorChanger:hover:after {
  42.       color: var(--test-hover-color);
  43.     }`,
  44.     `div:hover {
  45.       color: red;
  46.     }`]
  47.   .forEach(rule =&gt; modifyCss(rule));  
  48.   
  49.   // create some divs with class testColorChanger
  50.   const divs = [...Array(10)].map( (_, i) =&gt; {
  51.     const isEven = i % 2 == 0;
  52.     return `&lt;div class=&quot;${isEven ? `testColorChanger` : `none`}&quot;&gt;
  53.       ${isEven ? ` ` : `I&#39;m just a div`}
  54.      &lt;/div&gt;`;
  55.      });
  56.   document.body.insertAdjacentHTML(`beforeend`, divs.join(``));
  57. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://kooiinc.github.io/LifeCSS/index.browser.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案2

得分: 0

这是一个简单的方法来实现它：

  1. <div class="menu">
  2.   <div class="row" style="justify-content: center;">
  3.     <div class="menu-item">
  4.       <a href="" class="row" id="border" onclick="changeColor(this, 0)">
  5.         <span>home</span>
  6.       </a>
  7.     </div>
  9.     <div class="menu-item">
  10.       <a href="" class="row" id="border" onclick="changeColor(this, 1)">
  11.         <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
  12.       </a>
  13.     </div>
  15.     <div class="menu-item">
  16.       <a href="" class="row" id="border" onclick="changeColor(this, 2)">
  17.         <span>expert solutions</span>
  18.       </a>
  19.     </div>
  20.   </div>
  21. </div>
  1. .menu-item a.clicked::after {
  2.   content: "";
  3.   display: inline-block;
  4.   width: 10px;
  5.   height: 10px;
  6.   background-color: red; /* 将此处更改为所需的颜色 */
  7. }
  1. function changeColor(element, index) {
  2.   // 从所有链接中删除'clicked'类
  3.   const links = document.querySelectorAll('.menu-item a');
  4.   links.forEach((link) => link.classList.remove('clicked'));
  6.   // 将'clicked'类添加到单击的链接
  7.   element.classList.add('clicked');
  8. }
英文:

Here is a simple way to do it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;div class=&quot;menu&quot;&gt;
  2.   &lt;div class=&quot;row&quot; style=&quot;justify-content: center;&quot;&gt;
  3.     &lt;div class=&quot;menu-item&quot;&gt;
  4.       &lt;a href=&quot;&quot; class=&quot;row&quot; id=&quot;border&quot; onclick=&quot;changeColor(this, 0)&quot;&gt;
  5.         &lt;span&gt;home&lt;/span&gt;
  6.       &lt;/a&gt;
  7.     &lt;/div&gt;
  9.     &lt;div class=&quot;menu-item&quot;&gt;
  10.       &lt;a href=&quot;&quot; class=&quot;row&quot; id=&quot;border&quot; onclick=&quot;changeColor(this, 1)&quot;&gt;
  11.         &lt;span&gt;subjects &lt;i class=&quot;fa-solid fa-angle-down&quot;&gt;&lt;/i&gt; &lt;/span&gt;
  12.       &lt;/a&gt;
  13.     &lt;/div&gt;
  15.     &lt;div class=&quot;menu-item&quot;&gt;
  16.       &lt;a href=&quot;&quot; class=&quot;row&quot; id=&quot;border&quot; onclick=&quot;changeColor(this, 2)&quot;&gt;
  17.         &lt;span&gt;expert solutions&lt;/span&gt;
  18.       &lt;/a&gt;
  19.     &lt;/div&gt;
  20.   &lt;/div&gt;
  21. &lt;/div&gt;

<!-- language: lang-css -->

  1. .menu-item a.clicked::after {
  2.   content: &quot;&quot;;
  3.   display: inline-block;
  4.   width: 10px;
  5.   height: 10px;
  6.   background-color: red; /* Change this to the desired color */
  7. }

<!-- language: lang-js -->

  1. function changeColor(element, index) {
  2.   // Remove the &#39;clicked&#39; class from all links
  3.   const links = document.querySelectorAll(&#39;.menu-item a&#39;);
  4.   links.forEach((link) =&gt; link.classList.remove(&#39;clicked&#39;));
  6.   // Add the &#39;clicked&#39; class to the clicked link
  7.   element.classList.add(&#39;clicked&#39;);
  8. }

<!-- end snippet -->

答案3

得分: -1

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;
}

英文: 
  1. let currentItem = null;
  2. function change(i) {
  3.   const items = document.querySelectorAll(&quot;#border&quot;);
  4.   if (currentItem !== null) {
  5.     currentItem.style.setProperty(&quot;--background-border-menu&quot;, &quot;red&quot;);
  6.   }
  7.   const clickedItem = items[i];
  8.   clickedItem.style.setProperty(&quot;--background-border-menu&quot;, &quot;blue&quot;);
  9.   currentItem = clickedItem;
  10. }

答案4

得分: -1

  1. 这应该会起作用

function change(i) {
event.preventDefault();
var items = document.querySelectorAll(".menu-item a");
items.forEach(function(item, index) {
if (index === i) {
item.style.setProperty("--background-border-menu", "blue");
} else {
item.style.setProperty("--background-border-menu", "red");
}
});
}

  2. <details>
  3. <summary>英文:</summary>
  5. this should do the trick

function change(i) {
event.preventDefault();
var items = document.querySelectorAll(".menu-item a");
items.forEach(function(item, index) {
if (index === i) {
item.style.setProperty("--background-border-menu", "blue");
} else {
item.style.setProperty("--background-border-menu", "red");
}
});
}

  2. </details>

huangapple
  • 本文由 发表于 2023年7月3日 21:23:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76605185.html
  • css
  • html
  • javascript
  • menu
  • pseudo-element
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定