javascript - 编辑复制的内容 slider 以工作

Question

我复制了一个内容 slider ，并试图让它发挥作用。谁能帮我让它工作？谢谢。

我需要的是当你点击按钮 next, next2, next3 时它会显示指定的文本，如下所示。

http://codepen.io/kevin11/pen/Byxvqa

HTML:

<section class="demo">
   <button class="next">Next</button>
   <button class="prev">Next2</button>
   <button class="prev2">Next3</button>
   <div class="container">
      <div style="display: inline-block;" >
         Sample Text
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
      <div>
         Sample Text2
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
      <div>

         Sample Text3
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
   </div>
</section>

CSS:

.container {
    max-width: 400px;
    background-color: black;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.container div {
    background-color: white;
    width: 100%;
    display: inline-block;
    display: none;
}

.container img {
    width: 100%;
    height: auto;
}

button {
     position: absolute;
}

.next {
     left: 5px;
     width:150px;
     height:100px;
}

.prev {
     left: 5px;
     top:125px;
     width:150px;
     height:100px;
}

.prev2 {
     left: 5px;
     top:235px;
     width:150px;
     height:100px;
}

Answer 1

这是一种使用最少的 JavaScript 制作内容 slider 的方法。数量<a> s 应与 <div class="content"> 的数量相同

$(function() {
  $('.slider nav a').on('click', function() {
    show_content($(this).index());
  });
  
  show_content(0);

  function show_content(index) {
    // Make the content visible
    $('.slider .content.visible').removeClass('visible');
    $('.slider .content:nth-of-type(' + (index + 1) + ')').addClass('visible');

    // Set the tab to selected
    $('.slider nav a.selected').removeClass('selected');
    $('.slider nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
  }
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body {
  background: #596283;
  font: 14px Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  border: none;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
}

.slider {
  margin: 0px 20px;
  position: relative;
  background: #EFF1E4;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.slider nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #AD9897;
  color: #6C5D5D;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
  width: 150px;
}

.slider nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.slider nav a:hover,
.slider nav a.selected {
  background: #6C5D5D;
  color: #AD9897;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.slider .content {
  padding: 20px 0px;
  position: absolute;
  top: 0px;
  left: 150px;
  color: #6C5D5D;
  width: 0px;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.slider .content.visible {
  padding: 20px;
  width: calc(100% - 150px);
  overflow: scroll;
  opacity: 1;
}

.slider .content p {
  padding-bottom: 8px;
}

.slider .content p:last-of-type {
  padding-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <nav>
    <a>Content #1</a>
    <a>Content #2</a>
    <a>Content #3</a>
  </nav>
  <div class="content">
    <p>Content #1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
    <p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis. Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis, nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
  </div>
  <div class="content">
    <p>Content #2</p>
    <p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
    <p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
  </div>
  <div class="content">
    <p>Content #3</p>
    <p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
    <p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  </div>
</div>