jQuery操作样式

<div class="container">
    <button id="btn">切换类</button>
    <ul id="box">
      <li class="one">1</li>
      <li class="two">2</li>
      <li><a href="">3</a></li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <a href="">8</a>
    </ul>
  </div>

一、css操作

1.修改单个样式

// 修改单个样式
$('li').eq(3).css('color', 'green')

2.修改多个样式

// 修改多个样式
$('li').eq(3).css({
   color: 'green',
   fontSize: '32px', // 注意：使用驼峰命名法
   backgroundColor: 'red' 
})

3.获取样式

// 获取样式
let color = $('li').eq(3).css('color')
console.log(color) // rgb(0, 128, 0)

二、class操作

• 添加类 addClass()
• 移除类 removeClass()
• 判断类 hasClass()
• 切换类 toggleClass()

 // 添加类
 $('li').eq(4).addClass('five')

// 移除类
 $('li').eq(4).removeClass('five')

// 判断类
 let hasFive = $('li').eq(4).hasClass('five')
 console.log(hasFive) // 返回 true 或 false

 $('#btn').click(function () {
 // 切换类
 $('li').eq(4).toggleClass('five')
 })

案例：tab栏切换

效果：

HTML：

<div class="container">
    <div class="tab">
      <div class="item selected">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    <div class="content">1</div>
  </div>

css:

.container {
      width: 300px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      width: 100%;
      height: 40px;
      display: flex;
    }

    .item {
      width: 20%;
      height: 100%;
      line-height: 40px;
      text-align: center;
      border: 1px solid green;
      box-sizing: border-box;
      border-bottom: none;
      border-right: none;
    }

    .item:last-child {
      border-right: 1px solid green;
    }

    .content {
      width: 100%;
      height: 300px;
      line-height: 300px;
      text-align: center;
      border: 1px solid green;
      box-sizing: border-box;
    }

    .selected {
      background-color: red;
    }

js:

<script src="./jquery-3.4.1.js"></script>
  <script>
    $(".tab div").click(function () {
      // 给当前点击的item添加selected类，并给其兄弟元素移除selected类
      $(this).addClass('selected').siblings().removeClass('selected')
      // 获取item中的内容并添加给content
      let content = $(this).text()
      $('.content').text(content)
    })
  </script>

前端进阶精选：点此去