Как сделать эффект переключения, как на randomuser.me?

Question

[alex_maldinsky]

Добрый день.
Подскажите пожалуйста как реализовать переключение как на https://randomuser.me/, т.е. наводишь на элемент списка- меняются данные.

Заранее спасибо.

Answer 1

[Котик Антон]

Открыть Dev Tools, заглянуть в исходники, и там найти all.js:

var e = Array.prototype.slice.call(document.getElementById("values_list").getElementsByTagName("li"));
e.forEach(function(t) {
    t.addEventListener("mouseover", function() {
        e.forEach(function(e) {
            e.className = e.className.replace(/\bactive\b/, "")
        });
        var t = this;
        t.className += " active",
        document.getElementById("user_title").innerHTML = t.getAttribute("data-title"),
        document.getElementById("user_value").innerHTML = t.getAttribute("data-value"),
        t.getAttribute("data-caps") ? document.getElementById("user_value").style.textTransform = "lowercase" : document.getElementById("user_value").style.textTransform = "capitalize"
    })
})

Comments

[alex_maldinsky]

А если на 1 странице более 1 элемента, где требуется данный эффект?

[alex_maldinsky]

Все решено!