时间戳

首页 > 解决方案 > 动态切换 Div 滑块

javascript - 动态切换 Div 滑块

问题描述

如果您单击侧栏中的按钮，我正在尝试使其在侧栏右侧的内容部分中显示/向上滑动一些文本。我还想通过单击按钮来切换它（如果有意义的话）。

任何帮助将非常感激。

这就是我到目前为止所拥有的：小提琴：https ://jsfiddle.net/fymjqonc/4/

$(function($) {
  $('.show').click(function() {
    $('.toggle').hide();
    $('#' + $(this).data('toggle')).show();
  });
  $('[data-toggle="item1"]').click();
});
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" class="show" data-toggle="item1">Item 1</a></li>
      <li><a href="#" class="show" data-toggle="item2">Item 2</a></li>
      <li><a href="#" class="show" data-toggle="item3">Item 3</a></li>
      <li><a href="#" class="show" data-toggle="item4">Item 4</a></li>
      <li><a href="#" class="show" data-toggle="item5">Item 5</a></li>
    </ul>
  </nav>
  <div class="content">
    <div class="toggle" id="item1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div class="toggle" id="item2">
      <p>Step 2</p>
    </div>
    <div class="toggle" id="item3">
      <p>Step 3</p>
    </div>
    <div class="toggle" id="item4">
      <p>Step 4</p>
    </div>
    <div class="toggle" id="item5">
      <p>Step 5</p>
    </div>
  </div>

标签： javascriptjqueryhtmlcss

解决方案

嗨对不起，但我真的不明白你想要做什么，但请查看突出显示菜单的这段代码。

$(function($) {
  $('nav ul li').click(function() {
  	let index = $('nav ul li').index(this) + 1,
    		list = $('nav ul li');
    
    list.removeClass('active');
    $('.content div').slideUp();
    $(this).addClass('active');
    $('.content div:nth-child('+ index +')').slideDown();
 		
  });
});
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

.active {
  background: blue;
}

.content > div  {
  display: none;
}

.content > div:first-child {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" >Step 1</a></li>
      <li><a href="#" >Step 2</a></li>
      <li><a href="#"  >Step 3</a></li>
      <li><a href="#"  >Step 4</a></li>
      <li><a href="#"  >Step 5</a></li>
    </ul>
  </nav>

  <div class="content">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div >
      <p>Step 2</p>
    </div>
    <div >
      <p>Step 3</p>
    </div>
    <div >
      <p>Step 4</p>
    </div>
    <div >
      <p>Step 5</p>
    </div>
  </div>

</div>

推荐阅读