jquery - 如何使用垂直导航显示/隐藏图像

Question

我正在尝试使用垂直导航显示/隐藏图像，但我缺乏 Jquery 知识，有人可以帮忙吗？

我已经有 jquery 用于在垂直导航中的事件状态之间切换:

    $(document).ready(function () {
    $('.vertical__menu-item').click(function () {
        $('.vertical__menu-item').removeClass("vertical__menu-item--active ");
        $(this).addClass("vertical__menu-item--active ");
    });
});

这是 fiddle :https://jsfiddle.net/dh8Lucjk/1/

Answer 1

我建议将 ID 标签添加到您的垂直导航元素，以使其更容易。你可以这样:

<ul class="vertical__menu">
                            <li>
                                <a class="vertical__menu-item vertical__menu-item--active" href="#" id="link1">Truck Route</a>
                            </li>
                            <li>
                                <a class="vertical__menu-item" href="#" id="link2">Location Map</a>
                            </li>
                            <li>
                                <a class="vertical__menu-item" href="#" id="link3">Major Retailers Map</a>
                            </li>
                        </ul>

然后您的 jquery 可以利用这些 ID 来确定要显示的图像:

$(document).ready(function () {
    $('.location__content-img-wrapper').hide();
    $('#location-img-1').show();
    $('.vertical__menu-item').click(function () {
        $('.vertical__menu-item').removeClass("vertical__menu-item--active ");
        $(this).addClass("vertical__menu-item--active ");
        $('.location__content-img-wrapper').hide();
        $('#location-img-'+$(this).attr('id').substr(-1)).show();
    });
});