Question

我不知道如何解释我的问题，所以我找不到任何搜索，但我会尽力解释。

我刚刚开始学习html / css，我正在处理我的第一个项目，我很好奇如何通过点击同一个html页面上的导航栏来更改内容。

这是我的图片示例：

enter image description here

Answer 1

jQuery解决方案......这里是 FIDDLE

为了能够使用它，您必须在HTML文档的<head>部分中包含jQuery。 e.g。

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<div class="wrapper">

  <nav>
    <ul>
      <li data-rel="1" class="active">Section 1</li>
      <li data-rel="2">Section 2</li>
      <li data-rel="3">Section 3</li>
      <li data-rel="4">Section 4</li>
    </ul>
  </nav>

  <section>
    <article>
      <h4>Section 1</h4>
    </article>
  </section>

  <section>
    <article>
      <h4>Section 2</h4>
    </article>
  </section>

  <section>
    <article>
      <h4>Section 3</h4>
    </article>
  </section>

  <section>
    <article>
      <h4>Section 4</h4>
    </article>
  </section>

</div>

.wrapper {
  position: relative;
  width: 960px;
  padding: 10px;
}
section {
  background: #7f7f7f;
  position: absolute;
  display: none;
  top: 10px;
  right: 0;
  width: 740px;
  min-height: 400px;
  color: #fff;
  border: 4px solid #000;
}
section:first-of-type {
  display: block;
}
nav {
  float: left;
  width: 200px;
}
ul {
  list-style: none;
}
li {
  background: #c3c3c3;
  width: 100%;
  height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 4px solid #000;
}
.active {
  background: #7f7f7f;
}

将此脚本放在</body>标记之前。

<script>
  (function($) {
    $('nav li').click(function() {
      $(this).addClass('active').siblings('li').removeClass('active');
      $('section:nth-of-type('+$(this).data('rel')+')').stop().fadeIn(400, 'linear').siblings('section').stop().fadeOut(400, 'linear'); 
    });
  })(jQuery);
</script>

如果您想使用AJAX获取内容

当然首先在文档中包含jQuery库，就像前面的例子一样

 <head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </head>

然后

在根文件夹中创建文件夹includes，然后在includes文件夹中创建名为ext-content的文件夹，然后在文件夹ext-content中创建名为{{{{}}的HTML文档。 1}}，content1.html ...您希望显示不同的内容，当然没有doctype和其他来自索引页面的内容只是简单的内容。

内容页面的示例

content2.html
将以前创建的导航更改为此
```
<div>Content</div>
```
只留下一个部分，在该部分中创建div，其中包含类<nav> <ul> <li data-content="content1" class="active">Section 1</li> <li data-content="content2">Section 2</li> <li data-content="content3">Section 3</li> <li data-content="content4">Section 4</li> </ul> </nav>，如下所示
```
ext-content
```

使用此脚本代替上一个示例中的脚本

<section>
  <article>
    <div class="ext-content">

    </div>
  </article>
</section>

* 注意：您不需要使用文章e.t.c.你可以使用divs，span ......

更改同一html文件/页面上的内容

1 个答案: