Div 使用 jquery 不显示

Question

我有下面的内容，应该根据单击的图像 link 更改 div。

我希望英国内容在页面加载时自动显示，然后它提供了更改 div 以通过单击标志图像显示不同内容（语言）的选项。

这在 jsFiddle 和 CodePen 中有效，但在我的网站上无效，即使使用完全相同的代码也是如此。每当我单击伊朗徽标时，它都不会加载内容。

有什么建议吗？

$(document).ready(function() {
    $('#wayfindermenu a').click(function(e) {
        hideContentDivs();
        var tmp_div = $(this).parent().index();
        $('.maincontent div').eq(tmp_div).show();
    });

    function hideContentDivs() {
        $('.maincontent div').each(function() {
            $(this).hide();
        });
    }

    hideContentDivs();
    $('.maincontent div').eq(0).show();
});

$(function() {
    $('#wayfindermenu li a').on('click', function() {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

https://jsfiddle.net/pxce3t31/

Answer 1

出于某种原因，代码 $('.maincontent div').eq(1); 带回了您的国旗图像，而不是您的伊朗内容。 (div class="image right" style="display: block;"><img src="https://www.herts.ac.uk/__data/assets/image/0008/24983/Iran.jpg" alt="Flag of Kuwait"></div>)

改为尝试此实现 - 针对内容的特定 class 而不是使用索引：

使用 data 标签属性 link 哪个标志 link 对应哪个页面 ID，然后定位特定的 div 内容并显示它。

此外，英国不会在您的页面中显示为默认值，因为您的页面代码中没有 $('.maincontent div').eq(0).show();，但它在您的 fiddle 中。您还可以像我在下面所做的那样定位特定的英国 div $('page1').show();

$(document).ready(function() {
    hideContentDivs();
    $('#page1').show();
    
    $('#wayfindermenu a').click(function(e){
        hideContentDivs();
        var target = $(this).data('page'); // gets the data-page attribute
        $('#' + target).show(); // shows the page
    });
 
    function hideContentDivs(){
        $('.maincontent div').hide();
    }
});

li {
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wayfindermenu">
    <li id="link1" class="">
        <a href="#!" data-page="page1">
            <img src="https://www.herts.ac.uk/__data/assets/image/0005/104909/english.svg.png" alt="Britain flag logo" id="itemImg"/>
        </a>  
    </li>
    <li id="link2" class="active">
        <a href="#!" data-page="page2">
            <img src="https://www.herts.ac.uk/__data/assets/image/0020/104906/Flag_of_Iran.svg.png" alt="Iran flag logo" id="itemImg"/>
        </a>
    </li>
</ul>
<div class="maincontent">
    <div id="page1">british content</div>
    <div id="page2">iran content</div>
</div>

Div 使用 jquery 不显示

Div not displaying using jquery

javascript

jquery

html

document-ready