1. jQuery样式操作

1.1 操作css方法

参数只写属性名,则返回属性值(字符串)

$(this).css('color')

参数是属性名、属性值(逗号分隔，则表示设置属性

$(this).css('color','red')

参数可以是对象的形式

$(this).css({
    width: 400px,
    height: 400px
})

1.2 设置类样式方法

添加类

$('button:first').click(function() {
     $('div').addClass('block')
})

删除类

$('button:first').click(function() {
 	 $('div').removeClass('block')
})

切换类

$('button:first').click(function() {
  	$('div').toggleClass('block')
})

1.3 栗子: tab栏切换

思路:

当点击小li时,当前被点击的li添加类 current, 其余的移除current类
得到当前的索引号,显示相同索引号的内容

<style>
  .clearfix:before,
  .clearfix:after {
    content: '';
    display: table;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

  .header ul {
    width: 700px;
    height: 50px;
    padding-top: 15px;
    background-color: #ccc;
  }
  .box {
    width: 700px;
    height: 300px;
    margin: 30px auto;
  }
  li {
    float: left;
    height: 40px;
    line-height: 40px;
    list-style: none;
    padding: 0 15px;
  }
  li:hover {
    cursor: pointer;
  }
  .current {
    background-color: red;
    color: white;
  }
  .header {
    padding-top: 15px;
  }
  .content {
    padding-top: 20px;
    padding-left: 45px;
  }
  .content div {
    display: none;
  }
</style>
</head>
<body>
<div class="box">
  <div class="header clearfix">
    <ul>
      <li class="current">商品介绍</li>
      <li>规格与包装</li>
      <li>售后保障</li>
      <li>商品评价(50000)</li>
      <li>手机社区</li>
    </ul>
  </div>
  <div class="content">
    <div display="block">商品介绍模块</div>
    <div>规格与包装模块</div>
    <div>售后保障模块</div>
    <div>商品评价(50000)模块</div>
    <div>手机社区模块</div>
  </div>
</div>
<script>
  $(function() {
    $('.content div:first').show()
    $('.box li').click(function() {
      var currentIndex = $(this).index();

      $(this).addClass('current')
      $(this)
        .siblings('li')
        .removeClass('current')

        $('.content div').hide()
        $('.content div').eq(currentIndex).show()
    })
  })
</script>
</body>

在这里插入图片描述

栗子好好吃

发布了228 篇原创文章 · 获赞 41 · 访问量 5万+

私信关注

jquery --- > 监听tab栏的变化

1. jQuery样式操作

1.1 操作css方法

1.2 设置类样式方法

1.3 栗子: tab栏切换

猜你喜欢