[英]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');
});
});
由於某種原因,代碼$('.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.