如何用jquery写选项卡

如何用jquery写选项卡

​

​ * {

​ margin: 0;

​ padding: 0;

​ box-sizing: border-box;

​ }

​ #div {

​ width: 330px;

​ height: 500px;

​ margin: 50px auto;

​ }

​ ul li {

​ width: 110px;

​ height: 50px;

​ line-height: 50px;

​ text-align: center;

​ float: left;

​ display: inline-block;

​ background-color: lightcoral;

​ color: green;

​ border: 1px solid red;

​ }

​ p {

​ width: 330px;

​ height: 450px;

​ display: none;

​ border: 1px solid darkcyan;

​ }

​ p img {

​ width: 330px;

​ height: 450px;

​ display: block;

​ background-size: 100%;

​ }

​ .active {

​ background-color: greenyellow !important;

​ }

​

​

​

• 陈钰琪1

• ​

• 陈钰琪2

• ​

• 陈钰琪3

• ​

  

  

  

  ​

  ​ $(function () {

  ​ $(’#div ul li’).eq(0).addClass(‘active’)

  ​ $(‘p’).eq(0).css(‘display’, ‘block’)

  ​ $(’#div ul li’).click(function () {

  ​ var _index = $(this).index()

  ​ $(’#div ul li’).removeClass(‘active’).eq(_index).addClass(‘active’)

  ​ $(‘p’).css(‘display’, ‘none’).eq(_index).css(‘display’, ‘block’)

  ​ }

  ​ )

  ​ })

  ​

  ~~~