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

Question

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

我已经有了jquery，用于在垂直nav中的活动状态之间切换：

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

这是小提琴：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();
    });
});

Answer 2

我觉得你做错了。它会对你有帮助的。

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});