个人中心
gpt4 book ai didi

javascript - 多个显示隐藏切换与 div 滑出

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:19:41 25 4
gpt4 key购买 nike

我是编码新手，需要 jQuery 方面的帮助。我有 2 <div> s(一个带有图像，另一个带有菜单列表，均为 50% 宽度)，我需要能够单击其中一个菜单选项以使新的 div(50% 宽度)从右侧出现，同时缩小另一个2 个 div 宽度，每个宽度为 25%。然后单击相同的菜单选项以隐藏新的 div 并恢复为原始宽度。但是，如果我在新的 div 可见时单击另一个菜单选项，我需要它将内容更改为该特定菜单选项的内容。

如何交换左手边的<div>不使用 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/

最佳答案

首先，here's a method that ties the below examples of how to do this into the animation you're after :

$(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();
    });        
});​

Here's a working example ，尽管您可以看到 CSS 需要一些工作才能使其 100% 运行。不过，我建议进行一些更改:为您的链接和容器提供匹配的 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();
    });        
});

Here's a working example of that ...它允许您随意更改文本，而不用担心 JS 稍后会中断。另一种选择是使用 .index() 关闭列表中链接的索引。的 <li> , 如果链接数与 <div> 一致s 在所有情况下，即使因为“你好!”而存在偏移。链接。

Here's an example of an index approach使用您当前的 HTML:

$(function() {
    $("#nav").delegate("li","click", function() {
        $(".box3").show();
        $(".box3 .content").hide().eq($(this).index()-1).show();
    });        
});​

关于javascript - 多个显示隐藏切换与 div 滑出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13996939/

25 4 0
文章推荐： javascript - 幻影;安装和运行示例
文章推荐： ios - 背景位置
文章推荐： ios - 将仅支持 64 位设备的应用程序提交到 AppStore
文章推荐： javascript - FireFox 中奇怪的边框错误
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com