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条)

报告相同问题？

悬赏问题

  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集