Changing content on the same html file/page

前端未结

关注

 1  880

I am not sure how to explain my question, so I could not find anything by searching,but i will do my best to explain it.

I\'m just starting to learn html/css and i a

相关标签:

1条回答

半阙折子戏

2021-01-03 04:27

jQuery solution...here's a FIDDLE

To be able to use this you must include jQuery in the <head> section of your HTML document. 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;
}

Put this script just before the </body> tag.

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

If you wanna use AJAX for getting content

Of course first include jQuery library in your document like in previous example

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

then

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);
    }
  });
});

*Note: You don't need to use sections, articles e.t.c. you could use divs, spans...

0 讨论(0)