logo标签列表

多个显示/隐藏切换与滑动弹出的div

javascriptshow-hidejquery
4
我刚开始学编程，需要在jQuery方面寻求帮助。我有两个
标签（其中一个带有图片，另一个带有菜单列表，宽度均为50%），我需要能够点击菜单选项之一，从右侧出现一个新的
标签（宽度为50%），同时将另外两个
标签的宽度减小至25%。然后再次点击相同的菜单选项，以隐藏新的
标签并恢复原始宽度。但是，如果我在新的
标签可见时点击另一个菜单选项，则需要将内容更改为该特定菜单选项的内容。
如何使用jQuery交换左侧的
标签？
以下是我正在使用的HTML代码：
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
     <!-- SCRIPT FILES -->    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="script.js"></script>     
     <!-- CSS STYLESHEETS -->    
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />    
</head>
<body>
    <div id="wrapper">    
        <div id="header">        
        </div><!--header-->        
            <div id="container">        
                <div class="box-container">                
                    <div class="box1">                    
                        <img src="images/Untitled-1.png" alt="logo">                    
                    </div>                    
                    <div class="box2">                    
                        <div id="nav">                        
                            <ul>                            
                                <li><a>hello!</a></li>                                
                                <li><a>ADVERTISING</a></li>                                
                                <li><a>DESIGN</a></li>                                
                                <li><a>ABOUT</a></li>                                
                                <li><a>BLOG</a></li>                                
                                <li><a>SHOP</a></li>                                
                            </ul>                            
                        </div><!--nav-->                        
                    </div><!--box2-->                    
                    <div class="box3">                    
                        <div id="ADVERTISING" class="content">ADVERTISING</div>                        
                        <div id="DESIGN" class="content">DESIGN</div>                        
                        <div id="ABOUT" class="content">ABOUT</div>                        
                        <div id="BLOG" class="content">BLOG</div>        
                        <div id="SHOP" class="content">SHOP</div>                    
                    </div>                    
                </div><!--box-container-->            
            </div><!--container-->        
        <div id="footer">        
        </div><!--footer-->        
    </div><!-- wrapper-->        
</body>
</html>​

这是一个带有样式的可用jsFiddle示例： http://jsfiddle.net/YcphY/6/
这里有一个 jsfiddle http://jsfiddle.net/YcphY/5/，我尝试从这里复制和粘贴了很多其他的例子，但是我束手无策。 - user1892312
你的JSFiddle无法工作，因为你试图使用相对URL加载资源，即使它们在错误的域上。要真正利用JSFiddle的有用性，你应该将HTML/JS/CSS拆分到它们各自的面板中。 - Jasper
你可以不用 JavaScript 来完成这个。 - zb'
谢谢大家，我还是对这个问题感到困惑，而且尼克的带有示例的评论似乎不知道为什么消失了。 - user1892312
你怎么不用js实现呢？是使用css3动画吗？ - user1892312
我搞错了，你想要切换显示/隐藏的意思是 :active。 - zb'
2个回答
1
首先，这里有一种方法，将下面的示例与您想要的动画相结合：
$(function() {
  $("#nav").delegate("li","click", function() {
    var newDiv = $(".box3 .content").eq($(this).index()-1);
    newDiv.siblings().hide().end(); // hide the others
    if(newDiv.is(":visible")) {
      // if shown, fade it out, when the fade finishes, slide everything back
      newDiv.fadeOut(function() { 
        $(".box3").hide(); 
        $(".box1, .box2").animate({ width: "50%" });
      });
    } else {
      // if not shown, then slide over space, then fade in
      $(".box1, .box2").animate({ width: "25%" }, function() {
        $(".box3").show();
        newDiv.fadeIn("fast");
      });
    }
  });        
});​

根据你当前的CSS样式，你可以这样做：

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + $(this).text()).show().siblings().hide();
    });        
});​

这里有一个可用的示例, 但你可以看到 CSS 还需要一些工作才能完美运行。我建议进行一些修改：给你的链接和容器匹配的 ID，像这样:

<li><a id="ad">ADVERTISING</a></li> 

<div id="ad-container" class="content">ADVERTISING</div>

然后JS可以是：

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + this.id + "-container").show().siblings().hide();
    });        
});

这里有一个可行的例子，它允许您随意更改文本而不必担心JS之后会出现问题。另一个选择是使用.index()在列表中链接的索引进行操作，如果所有情况下链接数与<div>的数量一致，即使因为“hello！”链接而出现偏移也可以。

这是一个索引方法的例子，使用当前的HTML：

$(function() {
    $("#nav").delegate("li","click", function() {
        $(".box3").show();
        $(".box3 .content").hide().eq($(this).index()-1).show();
    });        
});​
我将所有代码从顶部的jsfiddle复制到我的文件中，但似乎它不起作用。我漏掉了什么需要做的吗？ - user1892312
我需要在我的js文件开头做一个document.ready的事情吗？ - user1892312
1

我认为jQuery的animate函数可能对你有用。

你需要做的是在你的HTML中添加一个位于窗口之外的隐藏div（或者如果你喜欢，可以在document.ready事件上使用jquery动态添加它），然后使用上述提到的animate函数将其滑入和滑出，并将其绑定到菜单项的点击函数。

示例代码

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow");
        hidden.removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow");
        hidden.addClass('visible');
    }
    });
});​

说明

在上面的代码中，我们将代码绑定到具有"id"为"slide"的元素的"click"事件。一旦单击该元素，代码就会启动。我们检查.hidden是否有名为"visible"的CSS类。如果没有，我们会动画隐藏的div滑入。如果它有一个可见的类，那么就把它滑出。

工作示例

这里有一个JSFiddle的工作示例供您参考

一些提示

  • 在隐藏的div的CSS中，请记得指定比当前左侧面板更大的z-index。
  • 在隐藏的div的CSS中，请记得将position设置为absolute，并将left设置为约为-1200px（或大于window.width()以使其适用于所有屏幕尺寸）。
不用客气，我已经更新了答案并添加了一些更多的指针。 - Amyth
大家能帮我看一下另一个答案吗？我在浏览器中无法使其工作。 - user1892312
1
其他答案过于复杂 - zb'
我不知道如何将这个答案融入我的代码。我在这方面真的很菜。 - user1892312
我需要它从右侧进入，并且在切换时将盒子1和盒子2的宽度切换为每个25%。 - user1892312
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接