jquery和隱藏浮動的div

我遇到了一個問題，我實際上在上一次工作時正在使用我正在使用的網站。但我重新設計，以納入其他元素，我似乎不能讓jquery部分工作。jquery和隱藏浮動的div

基本上，我有一個div文件的html文件。這些divs附有id =「」，以便我可以使用jquery調用它們。基本上我想要做的是顯示和隱藏一個HTML文檔的一部分的div。這些div一個接一個地浮動，但是當用戶在導航中點擊時，我需要它們在不同的時間顯示。下面是我已經到位的簡化標記，其中id將是用於確定要隱藏哪個和要顯示哪個標記的標記，並且選擇器將位於鏈接欄部分中的單個列表標記中。

<body> 
<div class="linkbar"></div> 
    <div class="pages"> 
    <div class="page-one" id="B1"></div> 
    <div class="page-two" id="B2"></div> 
    <div class="page-three" id="B3"></div> 
    <div class="page-four" id="B4"></div> 
    </div> 
<div class="footer"></div> 
</body>

另一個說明。幾乎所有這些元素都在1000px寬度內浮動。頁面部分是一個1000px寬度的x「X」高度空間，我想用page-one div的內容填充。

下面是jQuery標記，我已經投入顯示第一個頁面加載，然後後來的那些顯示和隱藏根據從naivigation中選擇的「頁面」。＃A1-3是與導航鏈接關聯的選擇器。

$(function() { 
$(document).ready(function() { 
    ${"B0").show(); 
    $("div.home").show(); 
    $("div.my-life").hide(); 
    $("div.photos").hide(); 
    $("div.video").hide(); 
    $("div.news").hide(); 
    $("div.contact-me").hide(); 
}); 
}); 


$(function() { 
$("#A1").click(function() { 
$("#B1").show(); 
$("#B2").hide(); 
$("#B3").hide(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
}); 
$(function() { 
$("#A2").click(function() { 
$("#B1").hide(); 
$("#B2").show(); 
$("#B3").hide(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
}); 
$(function() { 
$("#A3").click(function() { 
$("#B1").hide(); 
$("#B2").hide(); 
$("#B3").show(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
});

幫助？它使我瘋狂，因爲這最後一次工作。

來源

2012-03-30 Trevor Miles Wagner

$ { 「B0」）。顯示（）; {應該是（ – Rodolfo 2012-03-30 21:00:00

Hiya，$ {「B0」）。show（）; == $（「＃B0」）。show（）; - 我也無法在HTML中看到你的B0元素;看看你的代碼，並可能很快彈出你jsfiddle，可以彈出我所有的HTML你得到的：更新在這裏http://jsfiddle.net/6nar4/50/;乾杯！ – 2012-03-30 21:00:55

可能就像那個錯字一樣簡單。 ;-)在使用JavaScript時，如果在控制檯選項卡中打開Chrome的開發人員工具（f12）或Firebug（Firefox擴展），將會發現類似這樣的問題。附註：您可以將所有的皮革和表演組合在一起。將它們緩存到一個對象數組中，或者至少將它們整合到一起，如下所示：'$（'＃B1，＃B2，＃B3'）。hide（）' – 2012-03-30 21:01:26

你的{而不是（在你的第一選擇

$(document).ready(function() { 
    //${"B0").show(); 
    $("B0").show(); 
    $("div.home").show(); 
    $("div.my-life").hide(); 
    $("div.photos").hide(); 
    $("div.video").hide(); 
    $("div.news").hide(); 
    $("div.contact-me").hide(); 
});

編輯：可以很容易地使用firebug，一個非常有用的JavaScript調試器和一般被發現

小的JavaScript錯誤，因爲這用於Firefox的網頁開發工具

順便說一下$(function() {和$(document).ready(function() {做的是完全一樣的東西，沒有必要使用t下襬不止一次。你可以在其中一個包含你所有的jQuery。

來源

2012-03-30 21:01:14

javascript lint也有幫助：http://www.javascriptlint.com/online_lint.php – valentinas 2012-03-30 21:17:26

功能的兄弟姐妹可以幫助您優化代碼：

<body> 
<div class="linkbar"> 
    <a href="javascript:void(0)" class="link" rel="B1">B1</a> 
    <a href="javascript:void(0)" class="link" rel="B2">B2</a> 
    <a href="javascript:void(0)" class="link" rel="B3">B3</a> 
    <a href="javascript:void(0)" class="link" rel="B4">B4</a> 
    </div> 
    <div class="pages"> 
    <div class="page-one" id="B1">b1</div> 
    <div class="page-two" id="B2">b2</div> 
    <div class="page-three" id="B3">b3</div> 
    <div class="page-four" id="B4">b4</div> 
    </div> 
<div class="footer"></div> 
</body>

的javascript：

$('.link').click(function(){ 
    $('.pages').find('#'+$(this).attr('rel')).show().siblings().hide(); 
});

測試在這裏：http://jsfiddle.net/SZ7y9/10/

祝你好運！

來源

2012-03-30 21:36:05 rekans

您可以在原始代碼中使用許多重複模式。嘗試遵守DRY原則來幫助保持代碼的可管理性。這就是說，我重構了你的代碼以展示它如何被簡化。 try it out

$(function() { 
    $('#nav li a').click(function() { 
     var page = $(this).attr('rel'); // grab rel attribute 
     $('.pages').each(function() { // iterate 
      if ($(this).is(':visible')) { // returns true if visible 
       $(this).hide(); 
      } 
     }); 
     $('.' + page).stop(true, true).toggle('slow'); // show page 
    }); 
    return false; 
});

HTML

<div class="linkbar"> 
    <ul id="nav"> 
     <li><a href="#" rel="page-one">Page One</a></li> 
     <li><a href="#" rel="page-two">Page Two</a></li> 
     <li><a href="#" rel="page-three">Page Three</a></li> 
     <li><a href="#" rel="page-four">Page Four</a></li> 
    </ul> 
</div> 
<div class="pageWrapper"> 
    <div class="page-one pages">One</div> 
    <div class="page-two pages">Two</div> 
    <div class="page-three pages">Three</div> 
    <div class="page-four pages">Four</div> 
</div> 
<div class="footer"></div>

CSS

.pages { 
    display: none; 
}

來源

2012-03-30 21:51:43 shaunsantacruz

jquery和隱藏浮動的div

回答

相關問題