Question

好的。所以我正在使用这个简单的脚本切换div。你们都知道它是如何运作的，我敢肯定。

(define twice-the-stream
    (lambda (n)
        (letrec ([produce (lambda (current next)
                              (cons (* 2 current)
                                    (lambda ()
                                       (produce (current next) (force (next))))))])
  (produce (car n) (force (cdr n))))))

所以现在我有两个问题。第一个是：当你切换#about div时，它会出现。但是当你点击#showservices时它应该删除about div并将其替换为服务一，它们不应该跨越另一个。

第二个问题是;如何将所有这些变成一个脚本？当我确信它们都可以放在一个清洁的脚本中时，有4个是愚蠢的。

Answer 1

我认为你可以通过在数据属性中存储一些上下文来简化事情。我还从内联中获取了一些CSS，使其更容易阅读。我认为这是你想要达到的效果（结果窗格之间的交叉淡入淡出），但如果没有让我知道，我会看到我能做些什么来帮助。

＆＃13;

$(function(){

  $(".side-menu .slide-menu-item").on("click", function(){
    var $target = $("#" + $(this).attr("data-target"));
    $target.siblings().fadeOut();
    $target.fadeIn();
  });

});

＆＃13;

.slide-menu-item { cursor: pointer; margin-bottom: 1em; }
.main { position: relative; }
.main .panel { position: absolute; display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-menu"> <!-- on click na sliku -> otvara div -> fadein -->
  <div id="showabout" class="slide-menu-item" data-target="about">
    <img src="img/info.png" class="hvr-grow">
  </div>
  <div id="showservices" class="slide-menu-item" data-target="services">
    <img src="img/list.png" class="hvr-grow">
  </div>
  <div id="showportfolio" class="slide-menu-item" data-target="portfolio">
    <img src="img/briefcase.png" class="hvr-grow">
  </div>
  <div id="showcontact" class="slide-menu-item" data-target="contact">
    <img src="img/phone-call.png" class="hvr-grow">
  </div>
</div>

<div class="main">
    <div id="about" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> About Us </p>
            </div>
        </div>
    </div>
    <div id="services" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Services </p>
            </div>
        </div>
    </div>
    <div id="portfolio" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Portfolio </p>
            </div>
        </div>
    </div>
    <div id="contact" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Contact </p>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

这有用吗？

<script>
$(document).ready(function() {
    $('#showabout').click(function() {
            $('#about').fadeToggle("slow");
    });
    $('#showservices').click(function() {
            $('#about').hide();
            $('#services').slideToggle("slow");
    });
    $('#showportfolio').click(function() {
            $('#portfolio').fadeToggle("slow");
    });
    $('#showcontact').click(function() {
            $('#contact').slideToggle("slow");
    });
});
</script>

Answer 3

向所有网页lock提供DIV之类的课程以及class="page"

等所有按钮

这应该做的工作：

class="btn"

要结合淡入淡出或幻灯片，在上面的逻辑中，您也可以执行以下操作：

<script>
  jQuery(function( $ ) { // DOM ready

    var $pages = $(".page"); // Get all pages!

    $('.btn').click(function() {
      // Every .btn has an ID "showsomething". let's get the suffix after "show"***
      var pageId = this.id.split("show")[1];
      var $page = $("#"+  pageId);
      $pages.not($page).slideUp();
      $page.slideToggle();
    });

  });
</script>

单击其他div时切换脚本

3 个答案: