在li元素上循環，檢查類並設置css

嗨，我有一個jQuery功能的問題。我在我的wordpress網站上有一個帳戶菜單。我想將不透明度設置爲具有類is-active（可見的菜單項）的元素的1。當我點擊一個特定的元素（bsp：My Orders）時，類名稱is-active處於活動狀態，但問題在於不透明度不會改變。當我點擊另一個元素（bsp：我的賬戶）時，我點擊的最後一個（我的訂單）會改變不透明度（但延遲）。這太瘋狂了，我沒有任何想法。在li元素上循環，檢查類並設置css

我的HTML代碼：

<ul> 
 
\t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active"> 
 
\t \t <a href="https://mywebsite.com/en/my-account/" style="opacity: 0.5;" data-loaded="true">My Account</a> <!--This should be opacity: 1 because of is-active--> 
 
\t </li> 
 
\t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--subscriptions"> 
 
\t \t <a href="https://mywebsite.com/en/my-account/subscriptions/" style="opacity: 0.5;">Subscriptions</a> 
 
\t </li> 
 
\t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders active"> 
 
\t \t <a href="https://mywebsite.com/en/my-account/orders/" style="opacity: 1;" data-loaded="true">My Orders</a> <!--This should be opacity: .5--> 
 
\t </li> 
 
</ul>

我的jQuery代碼：

$(document).ready(function() { 
 
\t $('.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link').each(function(i, obj) { 
 
\t \t if ($(this).hasClass('is-active')) { 
 
    \t \t \t var myaccountlink = $(this).attr('class'); 
 
    \t \t \t myaccountlink = myaccountlink.replace(/\s+/g, '.'); 
 
    \t \t \t $('.' + myaccountlink).find('a').css('opacity', '1', '!important'); 
 
    \t \t } else { 
 
    \t \t \t $(this).find('a').css('opacity', '.5'); 
 
    \t \t } 
 
\t }); 
 
});

來源

2016-11-19 ItsOdi

這個PHP是如何與應用CSS？ – Qirel

點擊功能在哪裏？ – brk

請張貼css。 – mangotang

您可以刪除不透明度一個內聯規則ND基於類

li{ 
 
    opacity:0.5; 
 
    } 
 
li.active{ 
 
    opacity:1; 
 
    }

<ul> 
 
    \t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active"> 
 
    \t \t <a href="https://mywebsite.com/en/my-account/" data-loaded="true">My Account</a> <!--This should be opacity: 1 because of is-active--> 
 
    \t </li> 
 
    \t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--subscriptions"> 
 
    \t \t <a href="https://mywebsite.com/en/my-account/subscriptions/" >Subscriptions</a> 
 
    \t </li> 
 
    \t <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders active"> 
 
    \t \t <a href="https://mywebsite.com/en/my-account/orders/" data-loaded="true">My Orders</a> <!--This should be opacity: .5--> 
 
    \t </li> 
 
    </ul>

$(document).ready(function() { 
 
\t $('.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link').each(function(i, obj) { 
 
\t \t if ($(this).hasClass('is-active')) { 
 
    \t \t \t var myaccountlink = $(this).attr('class'); 
 
    \t \t \t myaccountlink = myaccountlink.replace(/\s+/g, '.'); 
 
    \t \t \t $('.' + myaccountlink).find('a').css('opacity', '1', '!important'); 
 
    \t \t } else { 
 
    \t \t \t $(this).find('a').css('opacity', '.5'); 
 
    \t \t } 
 
\t }); 
 
});

來源

2016-11-19 15:16:10

Omg我是一個白癡xD我從來沒有想過在css中做這件事..... – ItsOdi

在li元素上循環，檢查類並設置css

回答

相關問題