konsei 2019-11-09 14:07 采纳率: 72.2%
浏览 505
已采纳

如何通过js或者jquery在点击不同的标签时设置不同的样式？

假如有5个用div做的按钮，互为兄弟元素。默认第一个是选中状态，背景色为红色，
其余四个是未选中状态，背景色为灰色。
每个按钮处于选中状态时背景色都不同，
例如第一个是红色，第二个是蓝色，第三个是粉色，以此类推。
未选中状态下背景色都为灰色。
我需要在这几个按钮中的某个被点击后，怎样才能确定是哪个被点击了，
并设置相对应的颜色呢？

  • 写回答

4条回答 默认 最新

  • 前端探索者 2019-11-15 10:57
    关注
    <!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
  .main{
    width: 1200px;
    margin: 200px auto;
  }
  ul li{
    width: 150px;
    height:60px;
    display: inline-block;
    background: #eee;
    color: #000;
    text-align:center;
    line-height: 60px;
    cursor: pointer;
  }
  ul li:first-child{
    background: red;
  }
</style>
<body>
  <div class="main">
    <ul>
      <li>按钮1</li>
      <li>按钮2</li>
      <li>按钮3</li>
      <li>按钮4</li>
      <li>按钮5</li>
    </ul>
  </div>
</body>
<script>
  var colorList = ['red','blue','yellow','gold','green']
  $("ul li").click(function(){
    var index = $(this).index()
    $(this).parent().find('li').css("background-color",'#eee')
    $(this).css("background-color",colorList[index])
  })
</script>
</html>

    图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥20 求快手直播间榜单匿名采集ID用户名简单能学会的
  • ¥15 DS18B20内部ADC模数转换器
  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历