Question

我有下面的内容，根据点击的图像链接更改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>）

尝试此实现 - 定位内容的特定类而不是使用索引：

使用data代码属性链接哪个标记链接与哪个网页ID相关联，然后定位该特定div内容并显示该内容。

而且，英国在您的网页中不显示默认值，因为您的网页代码中没有$('.maincontent div').eq(0).show();，但它在您的小提琴中。您也可以像我在$('page1').show();

下面所做的那样定位特定的英国div

$(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显示

1 个答案: