SOURCE

const ul = document.querySelector('ul')
const wrapper = document.querySelector('.wrapper')

class Tab {
  constructor (ul, wrapper) 
  	console.log(222)
		this.ul = ul
    this.wrapper = wrapper
  },
  init () {
    this.slide()
  },
  slide () {
    this.ul.addEventListener('click', (e) => {
      console.log(111)
      let left = this.wrapper.style.left
      let index = Number(e.target.dataset.index)
      
      left = ((index - 1) * 500) + 'px'
    })
  }
}

let tab = new Tab(ul, wrapper)
tab.init()

<nav>
  <ul>
    <li class="item1" index="1">选项1</li>
    <li class="item2" index="2">选项2</li>
    <li class="item3" index="3">选项3</li>
    <li class="item4" index="4">选项4</li>
  </ul>
</nav>

<div class="container">
  <div class="wrapper">
    <section class="section1">内容1</section>
    <section class="section2">内容2</section>
    <section class="section3">内容3</section>
    <section class="section4">内容4</section>
  </div>
</div>

ul {
  display: flex;
  width: 400px;
  justify-content: space-around;
  background: lightsalmon;
}
li {
  padding: 10px;
  text-align: center;
  background: lightyellow;
  list-style: none;
  cursor: pointer;
}
li:hover {
  background: lightpink;
  transition: background .5s;
}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  width: 2000px;
  height: 300px
}
section {
  width: 500px;
  height: 300px;
  float: left;
}
.section1 {
  background: lightsteelblue;
}
.section2 {
  background: lightslategray;
}
.section3 {
  background: lightskyblue;
}
.section4 {
  background: lightseagreen;
}