在同一HTML文件/页面上更改内容

Question

在同一HTML文件/页面上更改内容

htmlcss

6

我不确定如何解释我的问题，所以在搜索时找不到任何东西，但我会尽力解释。

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

以下是我的图片示例:

输入图像描述

- Jockey

这通常是使用Javascript和AJAX完成的。 - Barmar

1

如果您的内容不是动态加载的，则 AJAX 没有用处。您需要使用 JavaScript。 - Ali.Rashidi

可能是新框架是什么？的重复。 - Quentin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Milan and Friends · Accepted Answer

jQuery的解决方案...这里有一个FIDDLE

要使用此功能，您必须在HTML文档的<head>部分中包含jQuery。例如：

<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>

那么

Create folder includes in your root folder then in includes folder create folder named ext-content then in folder ext-content create couple of HTML documents named e.g content1.html, content2.html ... with different content you wish to show of course without doctype and other stuff from index page just simple content.

example of content page

<div>Content</div>

Change previously created navigation into this

<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>

Leave only one section and in that section create div with class ext-content like below

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

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

Use this script instead of one in the previous example

$('nav li').click(function() {
  $.ajax({
    type: 'GET',
    url: 'includes/ext-content/'+$(this).data('content')+'.html',
    dataType: 'html',
    success: function(response) {
      $('.ext-content').html(response);
    }
  });
});

*注意: 您不需要使用章节、文章等，您可以使用div、span等...