在點擊時切換進度條

在下面的切片器中，點擊第一個彈出圖片，進度條應該加載寬度：90％，如上所示。爲此，我添加了一個onClick方法，它添加了一個點擊過的類，但它不起作用。在點擊時切換進度條

我已經使用了materializecss來實現彈出功能。

我用簡單的jQuery是

$('.h_first').on('click', function() { 
    $('.some1').toggleClass('clicked'); 
});

到Plunker鏈接是here。

爲我工作，我檢查了你的plnkr。請詳細說明它不工作。 –

在第一個彈出窗口中，進度應該在第一次點擊時加載高達90％ –

您的問題是，內聯樣式width: 0%將始終覆蓋樣式表。這是因爲inline > class。

因此，將樣式表中的寬度設置爲some1的默認狀態，然後切換時它應該可以工作。

此外，您需要先導入jquery才能工作。

見下面Plunker：

肘作品和進度條使用CSS3動畫和關鍵幀至4s從0％以上動畫至90％。

2017-03-27 22:11:41

您是否可以更新plnkr –

我已經爲答案添加了新的plnkr，現在它有動畫進度條。 –

將腳本加載標籤放在主體的底部，並使用！important作爲您的css類選擇器。

.clicked { 
    width: 90% !important; 
}

而對於HTML文件：

<body> 
... 
<script src="script.js"></script> 
</body>

的問題是，該腳本完成時，該文件甚至沒有加載和運行的重要用來覆蓋您已經放置的價值！寬度：90％。希望它能幫助你。

2017-03-27 22:17:10 DomainFlag

多一個問題如何添加進度條的轉換點擊可以幫助我 –

我的意思是點擊進度條應該從0加載到90％ –

我已經解決了這個問題。看到我的答案。 –

回答