白桦yuma
2019-11-09 14:07
采纳率: 93%
浏览 486
已采纳

如何通过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条)

相关推荐 更多相似问题