簡體   English   中英

div不使用jQuery顯示

[英]Div not displaying using jquery

我有以下應該根據單擊的圖像鏈接更改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/

由於某種原因,代碼$('.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();因此英國不會在您的網頁中默認顯示$('.maincontent div').eq(0).show(); 在您的頁面代碼中,但是在您的小提琴中。 您也可以像在$('page1').show();下方那樣定位特定的英國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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM