Google光纖計劃和定價菜單 - 他們是如何做到的？

在這個頁面上https://fiber.google.com/about/他們有計劃和定價菜單（價格大的藍色按鈕）。通過點擊下面的不同按鈕圖像正在改變。我想知道這是如何完成的。它是一種滑塊嗎？Google光纖計劃和定價菜單 - 他們是如何做到的？

我使用Wordpress，所以我可能會玩一些滑塊插件來獲得該效果，但我不想再使用插件，想使用編碼解決方案。

來源

2013-05-10 Andrew Kervin

這是一個有三個LI的UL。在裏面有一些跨度的樣式，使文本看起來不錯。每個LI都有不同的類名稱來適當地設計它。 – Michael 2013-05-10 15:10:52

在我看來就像一些不錯的CSS，使三個按鈕看起來不錯，下面是改變內容是div的一個簡單的可見性設置...

你或許可以使用檢查元素和查看源代碼，試圖模仿CSS ...爲動畫的東西，看看JavaScript或jQuery。

希望這會有所幫助。

來源

2013-05-10 14:43:40 Slippy

是對的;當你點擊按鈕時，一個'selected'類被添加到它。一類'selected'也被添加到後面的'.hero-feature' div。只需將您的樣式掛接到這些類上即可。您可以使用jQuery創建一個函數來添加類（使用jQuery的addClass（）方法），然後使用on（）方法將該函數綁定到click事件： http://api.jquery.com/addClass/ http://api.jquery.com/on/ – Dre 2013-05-10 18:50:18

Google光纖計劃和定價菜單 - 他們是如何做到的？

回答

相關問題