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

回答

相关问题