Question

我想在点击另一个按钮后让我的按钮改变颜色。目前，我有一个想法...但这将创建更多的HTML页面，这不是我想要的。下面的代码包含3个按钮，其中button1设置为深灰色，button2和button3为浅灰色。单击button2或button3应更改为深灰色，button1应为浅灰色。我曾尝试在互联网上进行研究，但没有找到任何解决方案。

注意：我使用div创建了我的按钮。

以下是我的代码片段：

 .select:hover {
   background-color: #2a2a2a;
 }
 .select:visited {
   background-color: pink;
 }
 .bcardunlaminated {
   display: table-cell;
   height: 37px;
   width: 210px;
   float: left;
   background-color: #2a2a2a;
   text-align: left;
   margin-top: 10px;
   line-height: 36px;
 }
 .bcardmatt {
   display: table-cell;
   height: 37px;
   width: 225px;
   float: left;
   background-color: #757575;
   text-align: left;
   margin-left: 3px;
   margin-top: 10px;
   line-height: 36px;
 }
 .bcardspotuv {
   display: table-cell;
   height: 37px;
   width: 230px;
   float: left;
   background-color: #757575;
   text-align: left;
   margin-left: 3px;
   margin-top: 10px;
   line-height: 17px;
 }
 .mat-font {
   color: white;
   font-size: 9pt;
   text-align: center;
 }

<div class="materialtable">
  <div class="materialrow">
    <a href="javascript:;" id=" hideaway1" onclick="document.getElementById('hideaway1').style.display='block';document.getElementById('hideaway2').style.display='none';
    			document.getElementById('hideaway3').style.display='none';toggleTable();return false">
      <div class="bcardunlaminated select">
        <div class="mat-font">1</div>
      </div>
    </a>
    <a href="javascript:;" id=" hideaway2" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='block'; 
    			document.getElementById('hideaway3').style.display='none';toggleTable2();return false">
      <div class="bcardmatt select">
        <div class="mat-font">2</div>
      </div>
    </a>
    <a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
    			document.getElementById('hideaway3').style.display='block';toggleTable3();return false">
      <div class="bcardspotuv select">
        <div class="mat-font">3</div>
      </div>
    </a>
  </div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" style="display:block;">1</div>
<div id="hideaway2" style="display:none;">2</div>
<div id="hideaway3" style="display:none;">3</div>

有什么建议吗？

Answer 1

只需在backgroundColor中添加更改即可。我在这里使用橙色，使用你想要的。

  <a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
                document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false">

你必须使用唯一的ID，你在前面的空间使用相同的ID，这使得它非常混乱和错误

Answer 2

我的建议 - 使用jQuery，因为看起来你不介意根据你接受的答案：

您需要更改toggleTable才能使用idx切换。您还可能希望使链接的容器div可单击而不是具有链接。您需要添加一个游标：ponter到CSS

$(function() {
  $(".select").on("click",function(e){
    e.preventDefault(); // only needed if .select are links
    var idx = $.trim($(this).text());
    $(".hideaway").hide();
    $("#hideaway"+idx).show();
    toggleTable(idx);
  });
});

HTML：

<div class="materialtable">
  <div class="materialrow">
      <div class="bcardunlaminated select">
        <div class="mat-font">
          1
        </div>
      </div>
      <div class="bcardmatt select">
        <div class="mat-font">
          2
        </div>
      </div>
      <div class="bcardspotuv select">
        <div class="mat-font">
           3
        </div>
      </div>
    </a>
  </div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" class="hideaway">1</div>
<div id="hideaway2" class="hideaway">2</div>
<div id="hideaway3" class="hideaway">3</div>

Answer 3

以下是我认为您正在寻找的示例：http://jsfiddle.net/f60z1nj3/2/

使用jquery：

$(function () {
$('.test').click(function(){
            if ($(this).hasClass('darkGrey') ){
            $(this.children).removeClass('darkGrey')
        } 
        else
        {
            $(this.children).addClass('darkGrey');
            $(this).siblings().children().removeClass('darkGrey');
        }
    })
});

所以我只给你的可选项一个类而不是一个id，这比使用id更具体。然后它是一个简单的onlclick事件来添加和删除我称为darkGrey的高亮类。我没有包括在底部切换div，因为看起来你有一个处理它的功能。

单击另一个按钮后如何更改按钮颜色

3 个答案: