为什么隐藏包含div意味着子代不会在jquery中显示

Question

以下代码有效，但我想替换$（“＃homepage”）。hide（）;行； 与$（“＃page”）。hide（）; 这样我就可以处理多个页面。 问题是该页面将隐藏页面div，但不会再次显示主页div，但如果不涉及父div，它将正确显示和隐藏div。

<html>
  <body>
    <div id="page">
      <div id="homepage">
        <h1>home</h1>
      </div>
      <div id="advert">
        <h1>advert</h1>
      </div>
    </div>
    <script>
      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#ad").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#homepage").hide();
          $("#ad").show();
        });
      });
      app.run();
    </script>
  </body>
</html>

我将代码修改如下，以演示我的预期用法：

      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#page").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#page").hide();
          $("#ad").show();
        });
      });
      app.run();

此代码产生一个空白窗口，不显示主页或广告页面。 我尝试了多种不同的路由库。

Answer 1

如果隐藏父级，则子级也将被隐藏，因为它们相互连接。 如您所见，标签的层次结构设计。 因此，如果您想显示

<div id="homepage"></div>

并隐藏

<div id="page"></div>

您应该将#homepage置于#page范围之外。 那是正确的规则。

希望对您有所帮助。

Answer 2

我没有使用sammy.js库。 我找到了简单的示例示例。 检查下面的链接。 https://jsfiddle.net/KZknm/34/

$.sammy(function(){
        // bind to #:page where :page can be some value
        // we're expecting and can be retrieved with this.params
        this.get('#:page',function(){
            // Demo just finds the div within #pages and loads it
            // within the #container
            $('#container').empty().append(
                $('#pages #'+this.params['page']+'_html').clone()
            );
        });
    }).run();

这是HTML

<!-- very simple container that may be changed with clicks -->
<div id="container">
    <h1>Default Page</h1>
    <p>This is the default page</p>
</div>

<!-- Dummy navigation list using hash links -->
<ul>
    <li><a href="#foo">Load "foo.html"</a></li>
    <li><a href="#bar">Load "bar.html"</a></li>
</ul>

<!-- fake ajax content--for the purposes of this demo, we just load
     content from another source (in this case named divs) -->
<div id="pages" style="display:none">
    <div id="foo_html">
        <h1>Foo page</h1>
        <p>This is the foo page.</p>
    </div>
    <div id="bar_html">
        <h1>Bar page</h1>
        <p>This is the bar page</p>
    </div>
</div>

为什么隐藏包含div意味着子代不会在jquery中显示

问题描述

2 个解决方案

解决方案1
1 2018-11-13 07:10:58

解决方案2
-1 2018-11-13 06:36:42

为什么隐藏包含div意味着子代不会在jquery中显示

问题描述

2 个解决方案

解决方案1 1 2018-11-13 07:10:58

解决方案2 -1 2018-11-13 06:36:42

解决方案1
1 2018-11-13 07:10:58

解决方案2
-1 2018-11-13 06:36:42