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 ");
    });
});

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

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

2 个答案: