Question

我遇到了一个问题，我上次在网站上工作时实际上已经开始工作了。但我正在重新设计以包含其他元素，我似乎无法让jquery部分工作。

基本上，我有一个带div的html文档。这些div附加了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”高度的空间，我想要填充页面一个div的内容。

下面是我在页面加载时显示第一个的jQuery标记，然后是后续的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();    
});
});

帮助？它让我疯狂，因为这是上次工作的。

Answer 1

你有一个{而不是（在你的第一个选择器中

）

$(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常规Web开发工具。

顺便说一下，$(function() {和$(document).ready(function() {做同样的事情，不需要多次使用它们。您可以在其中一个中包含所有jQuery。

Answer 2

功能兄弟可以帮助您优化代码：

<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/

祝你好运！

Answer 3

您可以在原始代码中使用许多重复模式。请尝试遵守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;
}

jquery和隐藏浮动的div

3 个答案: