如何保持 svg 图标处于活动状态,切换选项卡
how to keep svg icon active , toggle tab
我有一个使用 bootstrap 完成的切换选项卡,带有 .svg 图标。我喜欢在单击图标时激活图标(更改颜色),但我喜欢它保持红色并在我单击下一个时变回灰色等。
实际上,我只是在 css 上有一个 :hover,它会改变颜色但不会保留它。
我没有 js 脚本,但我可以使用它
.iconFormule:hover {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.iconFormule1:hover {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.filter-foodmenu-tab {
overflow: hidden;
margin-bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.filter-foodmenu-tab .nav-tabs {
border-bottom: 0 solid;
overflow: hidden;
display: inline-block;
}
.filter-foodmenu-tab .nav-tabs>li {
display: inline-block;
margin-bottom: 20px;
border: 0 solid;
}
.filter-foodmenu-tab .nav-tabs>li>a {
border-radius: 0px;
display: block;
font-size: 18px;
font-weight: 700;
padding: 0px 35px;
text-transform: uppercase;
-webkit-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
color: #bababa;
font-family: "Playfair Display", serif;
text-align: center;
}
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="formulemidiContainer">
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<svg class="iconFormule" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule">formule<br/> midi</p></a></svg>
</li>
<li class="formulemidiContainer1">
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<svg class="iconFormule1" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule1">formule<br/> midi</p></a></svg>
</li>
</ul>
</div>
我认为最简单的方法是为此添加一个类似于以下内容的脚本。
// example in jquery
$('button').on('click', function() {
$('button').not(this).css('color', 'gray');
// should reset all buttons except clicked one to gray
$(this).css('color', 'red');
// adapt to your way of coloring the icon -
// only changes color of the clicked button
}
(以上例子未经测试。)
我在 <ul>
上添加了带有事件侦听器的 JavaScript。 “selected”用作 <li>
上的 class 名称。因此,<li>
的所有子元素都可以包含在 CSS 选择器中并相应地设置样式。
单击其中一个子元素时,我使用 closest()
查找父 <li>
元素并设置 class 名称。
document.querySelector('.nav-tabs').addEventListener('click', e => {
document.querySelectorAll('.formulemidiContainer').forEach(elm => elm.classList.remove('selected'));
let parent_li = e.target.closest('.formulemidiContainer');
parent_li.classList.add('selected');
});
.iconFormule:hover, .selected .iconFormule {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.iconFormule1:hover, .selected .iconFormule1 {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.filter-foodmenu-tab {
overflow: hidden;
margin-bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.filter-foodmenu-tab .nav-tabs {
border-bottom: 0 solid;
overflow: hidden;
display: inline-block;
}
.filter-foodmenu-tab .nav-tabs>li {
display: inline-block;
margin-bottom: 20px;
border: 0 solid;
}
.filter-foodmenu-tab .nav-tabs>li>a {
border-radius: 0px;
display: block;
font-size: 18px;
font-weight: 700;
padding: 0px 35px;
text-transform: uppercase;
-webkit-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
color: #bababa;
font-family: "Playfair Display", serif;
text-align: center;
}
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="formulemidiContainer">
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<svg class="iconFormule" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule">formule<br/> midi</p></a></svg>
</li>
<li class="formulemidiContainer1">
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<svg class="iconFormule1" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule1">formule<br/> midi</p></a></svg>
</li>
</ul>
</div>
我有一个使用 bootstrap 完成的切换选项卡,带有 .svg 图标。我喜欢在单击图标时激活图标(更改颜色),但我喜欢它保持红色并在我单击下一个时变回灰色等。 实际上,我只是在 css 上有一个 :hover,它会改变颜色但不会保留它。 我没有 js 脚本,但我可以使用它
.iconFormule:hover {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.iconFormule1:hover {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.filter-foodmenu-tab {
overflow: hidden;
margin-bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.filter-foodmenu-tab .nav-tabs {
border-bottom: 0 solid;
overflow: hidden;
display: inline-block;
}
.filter-foodmenu-tab .nav-tabs>li {
display: inline-block;
margin-bottom: 20px;
border: 0 solid;
}
.filter-foodmenu-tab .nav-tabs>li>a {
border-radius: 0px;
display: block;
font-size: 18px;
font-weight: 700;
padding: 0px 35px;
text-transform: uppercase;
-webkit-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
color: #bababa;
font-family: "Playfair Display", serif;
text-align: center;
}
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="formulemidiContainer">
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<svg class="iconFormule" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule">formule<br/> midi</p></a></svg>
</li>
<li class="formulemidiContainer1">
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<svg class="iconFormule1" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule1">formule<br/> midi</p></a></svg>
</li>
</ul>
</div>
我认为最简单的方法是为此添加一个类似于以下内容的脚本。
// example in jquery
$('button').on('click', function() {
$('button').not(this).css('color', 'gray');
// should reset all buttons except clicked one to gray
$(this).css('color', 'red');
// adapt to your way of coloring the icon -
// only changes color of the clicked button
}
(以上例子未经测试。)
我在 <ul>
上添加了带有事件侦听器的 JavaScript。 “selected”用作 <li>
上的 class 名称。因此,<li>
的所有子元素都可以包含在 CSS 选择器中并相应地设置样式。
单击其中一个子元素时,我使用 closest()
查找父 <li>
元素并设置 class 名称。
document.querySelector('.nav-tabs').addEventListener('click', e => {
document.querySelectorAll('.formulemidiContainer').forEach(elm => elm.classList.remove('selected'));
let parent_li = e.target.closest('.formulemidiContainer');
parent_li.classList.add('selected');
});
.iconFormule:hover, .selected .iconFormule {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.iconFormule1:hover, .selected .iconFormule1 {
filter: invert(0.4) sepia(1) saturate(20) hue-rotate(316.8deg) brightness(0.79);
}
.filter-foodmenu-tab {
overflow: hidden;
margin-bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.filter-foodmenu-tab .nav-tabs {
border-bottom: 0 solid;
overflow: hidden;
display: inline-block;
}
.filter-foodmenu-tab .nav-tabs>li {
display: inline-block;
margin-bottom: 20px;
border: 0 solid;
}
.filter-foodmenu-tab .nav-tabs>li>a {
border-radius: 0px;
display: block;
font-size: 18px;
font-weight: 700;
padding: 0px 35px;
text-transform: uppercase;
-webkit-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
color: #bababa;
font-family: "Playfair Display", serif;
text-align: center;
}
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="formulemidiContainer">
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<svg class="iconFormule" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule">formule<br/> midi</p></a></svg>
</li>
<li class="formulemidiContainer1">
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<svg class="iconFormule1" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0.498902C9.24499 0.498976 6.57393 1.42045 4.43531 3.10859C2.2967 4.79673 0.820792 7.14873 0.255424 9.76962C-0.309945 12.3905 0.0696603 15.1207 1.33049 17.5017C2.59133 19.8826 4.6566 21.7694 7.17951 22.8452L7.10106 24.0467C7.0794 24.335 7.1183 24.6247 7.21539 24.898C7.31249 25.1713 7.46574 25.4225 7.66585 25.6365C7.81724 25.7983 8.00136 25.928 8.20669 26.0175C8.41201 26.107 8.63413 26.1544 8.85914 26.1566H8.86204C9.08737 26.1544 9.30978 26.1069 9.51534 26.0171C9.72089 25.9274 9.90513 25.7973 10.0565 25.6351C10.2561 25.4211 10.4088 25.1698 10.5052 24.8966C10.6016 24.6233 10.6397 24.3339 10.6172 24.0458L10.5975 23.7416C11.5827 23.8603 12.5795 23.8556 13.5634 23.7275L13.5429 24.045C13.5196 24.3325 13.5569 24.6217 13.6526 24.8947C13.7483 25.1677 13.9003 25.4189 14.0993 25.6328C14.2492 25.7972 14.4332 25.9289 14.6392 26.0191C14.8452 26.1094 15.0685 26.1563 15.2945 26.1566C15.5205 26.157 15.744 26.1108 15.9502 26.0211C16.1565 25.9315 16.341 25.8004 16.4914 25.6365C16.6916 25.4224 16.8449 25.171 16.942 24.8975C17.0391 24.624 17.0779 24.3342 17.0562 24.0457L16.974 22.7748C19.468 21.671 21.4981 19.7706 22.7266 17.3896C23.9552 15.0086 24.3082 12.2906 23.727 9.68751C23.1458 7.08445 21.6653 4.75323 19.5318 3.08154C17.3983 1.40986 14.7403 0.498453 12 0.498902ZM16.541 16.0786C16.92 16.0217 17.2655 15.8348 17.5151 15.5518C17.7648 15.2689 17.9021 14.9085 17.9022 14.5357V9.1822C17.9022 9.10574 17.871 9.03241 17.8153 8.97834C17.7597 8.92428 17.6843 8.89391 17.6056 8.89391C17.527 8.89391 17.4515 8.92428 17.3959 8.97834C17.3403 9.03241 17.309 9.10574 17.309 9.1822V14.5357C17.3095 14.7963 17.2036 15.0465 17.0145 15.2313C16.8254 15.4162 16.5687 15.5205 16.3005 15.5216H16.2264L15.5955 15.5217V9.18163C15.5955 9.10517 15.5643 9.03184 15.5087 8.97778C15.4531 8.92371 15.3776 8.89334 15.299 8.89334C15.2203 8.89334 15.1449 8.92371 15.0892 8.97778C15.0336 9.03184 15.0024 9.10517 15.0024 9.18163V15.5217H14.3734L14.2985 15.5216C14.0296 15.5213 13.7718 15.4173 13.5817 15.2325C13.3915 15.0477 13.2845 14.7971 13.2842 14.5357V9.1822C13.2842 9.10574 13.253 9.03241 13.1974 8.97834C13.1417 8.92428 13.0663 8.89391 12.9876 8.89391C12.909 8.89391 12.8335 8.92428 12.7779 8.97834C12.7223 9.03241 12.6911 9.10574 12.6911 9.1822V14.5357C12.6917 14.9092 12.83 15.2701 13.0807 15.5532C13.3315 15.8362 13.6782 16.0226 14.0581 16.0787L13.8676 19.0189C12.6978 19.3184 11.4701 19.3324 10.2935 19.0596L10.0771 15.7321C11.0219 15.1346 11.6234 13.8891 11.6234 12.4947C11.6234 10.5092 10.3847 8.89391 8.86204 8.89391C7.33623 8.89391 6.09484 10.5092 6.09484 12.4947C6.09484 13.8888 6.69772 15.1345 7.64402 15.7322L7.51174 17.7547C6.32013 16.8513 5.44648 15.6106 5.01145 14.2039C4.57642 12.7971 4.60147 11.2938 5.08314 9.90152C5.56482 8.50923 6.47934 7.29665 7.70043 6.43124C8.92151 5.56584 10.3889 5.0903 11.9 5.07031C13.411 5.05032 14.8912 5.48686 16.1361 6.31965C17.3809 7.15243 18.3291 8.34037 18.8495 9.71941C19.37 11.0984 19.4371 12.6005 19.0417 14.0183C18.6462 15.436 17.8076 16.6994 16.6417 17.6339L16.541 16.0786ZM8.47343 15.4714C8.34099 15.4373 8.21335 15.3875 8.09334 15.3233C7.25281 14.8777 6.68801 13.7409 6.68801 12.4947C6.68801 10.8272 7.66323 9.4705 8.86204 9.4705C10.0577 9.4705 11.0303 10.8272 11.0303 12.4947C11.0303 13.7418 10.4666 14.8784 9.6261 15.3241C9.27643 15.5177 8.8627 15.5706 8.47343 15.4714ZM9.62407 25.2402C9.52797 25.3448 9.41068 25.429 9.27955 25.4874C9.14842 25.5459 9.00628 25.5774 8.86204 25.58H8.85914C8.71501 25.5774 8.57299 25.546 8.44192 25.4876C8.31086 25.4293 8.19358 25.3453 8.0974 25.2409C7.95285 25.0844 7.84249 24.901 7.77299 24.7018C7.7035 24.5026 7.6763 24.2917 7.69306 24.082L7.78441 22.6833L7.78488 22.6808L8.22079 16.0013C8.23532 16.0058 8.2504 16.0072 8.26501 16.0114C8.33382 16.0307 8.40358 16.0466 8.47404 16.0591C8.50281 16.0643 8.53121 16.0714 8.56012 16.0755C8.75972 16.1058 8.96296 16.1059 9.1626 16.0758C9.19254 16.0716 9.22181 16.0643 9.25158 16.0589C9.32046 16.0462 9.38888 16.0316 9.45652 16.0122C9.47089 16.0081 9.48583 16.0067 9.50012 16.0023L9.71387 19.3048L9.71512 19.3102L10.0252 24.0816C10.0428 24.2911 10.0162 24.5018 9.94728 24.701C9.87831 24.9002 9.76834 25.0837 9.62407 25.2402ZM10.5605 23.1642L10.3323 19.6566C10.8803 19.7722 11.4393 19.8308 12 19.8316C12.6162 19.8311 13.2301 19.7599 13.8291 19.6193L13.6013 23.1422C12.593 23.2783 11.5707 23.2858 10.5605 23.1642ZM16.0598 25.2409C15.9631 25.3445 15.8451 25.4271 15.7134 25.4837C15.5818 25.5402 15.4394 25.5692 15.2955 25.569C15.1516 25.5688 15.0093 25.5393 14.8779 25.4823C14.7464 25.4254 14.6287 25.3424 14.5323 25.2385C14.3886 25.0822 14.2793 24.899 14.211 24.7001C14.1426 24.5013 14.1168 24.291 14.1349 24.0821L14.178 23.4148L14.1792 23.41L14.651 16.0983H15.9477L16.3695 22.6172L16.4642 24.0807C16.481 24.2907 16.4539 24.5017 16.3844 24.7011C16.3149 24.9006 16.2045 25.0842 16.0598 25.2409ZM16.9345 22.1625L16.6864 18.3277C18.0288 17.364 19.0221 16.0114 19.5236 14.4643C20.0251 12.9172 20.0089 11.2553 19.4774 9.71772C18.9459 8.18011 17.9265 6.84595 16.5656 5.90706C15.2048 4.96817 13.5728 4.47293 11.9041 4.49255C10.2354 4.51217 8.61617 5.04564 7.27911 6.01625C5.94206 6.98686 4.95611 8.34461 4.46304 9.89426C3.96996 11.4439 3.99516 13.1056 4.53501 14.6405C5.07486 16.1753 6.10155 17.5043 7.46745 18.4361L7.2195 22.2326C4.86553 21.1763 2.95202 19.372 1.79432 17.1171C0.636608 14.8621 0.303786 12.2911 0.850699 9.82762C1.39761 7.36418 2.79162 5.15535 4.803 3.56514C6.81438 1.97493 9.3231 1.09823 11.9157 1.07952C14.5084 1.06082 17.0302 1.90121 19.0657 3.46222C21.1011 5.02323 22.5287 7.2117 23.1132 9.66698C23.6976 12.1223 23.4041 14.6978 22.281 16.9692C21.1579 19.2406 19.2721 21.0724 16.9345 22.1625Z" fill="#727272"/><br/><br/>
<p class="pFormule1">formule<br/> midi</p></a></svg>
</li>
</ul>
</div>