dongsu4345
2014-11-11 09:24
浏览 1.7k
已采纳

HTML - 如何更改OnClick事件上的按钮背景颜色

I have following PHP code where 4 buttons are displaying dynamically from database table. Different content is displaying on page based on clicked button.

Now, I want to do so when I click 1st button then button bg color should be changed so visitor can know which button is pressed. When 2nd button is clicked then bg color of that button should be changed and previously clicked button (1st button in this example) should be restored with original color.

Please let me know easiest way to do this using either CSS or Javascript.

<form name="frm_list" action="toptipper.php" method="post" enctype="multipart/form-data">

<?php 
while(!$rs_tab_list->eof())
{
?>

<button type="submit" name="btn_tab" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>

<?php  
$rs_tab_list->movenext();
}       
?>

</form>

图片转代码服务由CSDN问答提供 功能建议

我有以下PHP代码,其中4个按钮是从数据库表动态显示的。 基于单击的按钮在页面上显示不同的内容。

现在,我想在单击第一个按钮然后按钮bg颜色时更改,以便访问者可以知道按下了哪个按钮。 单击第二个按钮时,应更改该按钮的bg颜色,并且应使用原始颜色恢复先前单击的按钮(本例中的第一个按钮)。

请使用CSS或Javascript告诉我最简单的方法。

 &lt; form name =“frm_list”action =“toptipper.php”method =“post”enctype =“multipart / form-data”&gt; 
 
&lt;  ?php 
while(!$ rs_tab_list-&gt; eof())
 {
?&gt; 
 
&lt; button type =“submit”name =“btn_tab”value =“&lt;?php print($ rs_tab_list  - &gt; fields(“tabpkid”));?&gt;“&gt;&lt;?php print($ rs_tab_list-&gt; fields(”title“));  ?&gt;&lt; / button&gt; 
 
&lt;?php 
 $ rs_tab_list-&gt; movenext(); 
} 
?&gt; 
 
&lt; / form&gt; 
   
 
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

9条回答 默认 最新

  • doulvli9462 2014-11-11 10:05
    已采纳

    Uncomment out the comment marks if you want only one selected at a time.

    $('button').on("click",function(){  
      //$('button').not(this).removeClass();
      $(this).toggleClass('active');
      
      });
    .active{background-color:red;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button>1</button>
    <button>2</button>
    <button>3</button>

    </div>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanba4254 2014-11-11 09:26

    add id to button and then something like:

    $('#buttonID').css('background-color','coloryouwant');
    
    评论
    解决 无用
    打赏 举报
  • duanpu4143 2014-11-11 09:35

    In case you want to restore the intial value of the previous button, an easy way to do this is with jQuery. You can use the addClass() routine for this. For example:

    //Restore all values
    $("input").removeClass();
    $("input").addClass("default");
    
    //Set class that has the highlight color
    $("#button2").addClass("highlight");
    

    With this HTML:

    <input type="button" id="button1"/>
    <input type="button" id="button2"/>
    

    And this CSS:

    .default { background-color: blue;}
    .highlight { background-color: yellow;}
    

    Just add the onClick to the element to call the right functions.

    Hope it helps.

    评论
    解决 无用
    打赏 举报
  • douyou7072 2014-11-11 09:36

    Write JS Onclick event like this onclick="this.style.backgroundColor = 'red';"

    <?php 
    while(!$rs_tab_list->eof())
    {
    ?>
    
    <button type="submit" name="btn_tab"  onclick="this.style.backgroundColor = 'red';" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>
    
    <?php  
    $rs_tab_list->movenext();
    }       
    ?>
    
    评论
    解决 无用
    打赏 举报
  • douwen3198 2014-11-11 09:37

    It is pretty direct with jquery. I advice to add class using jquery and style the button later. Below fiddle helps you.

    http://jsfiddle.net/kiranvarthi/oudkau4j/

    $("button").click(function(){ 
        $(this).addClass("active");
    });
    
    评论
    解决 无用
    打赏 举报
  • dslf46995 2014-11-11 09:38

    You can use js. Create class .active and define it in your css:

    .active {
        background-color: #yourcolor;
    }
    

    Now using js jquery you can make onclick event and add class on clicked button:

    $('#yourbtnid').click(function() {
        $(this).addClass('active');
    }
    

    !Don't forget to import jquery library before your js file or code in html file

    评论
    解决 无用
    打赏 举报
  • dongyigua4468 2014-11-11 09:40

    I don't know if changing the button color like this is the best design decision, but just in case it's purely for learning purposes:

    1) give the 2 buttons different IDs

    2) use this javascript code

    b1.onclick = function() {
         b1.style.background = "green";
         b2.style.background = "";   }
    
    b2.onclick = function() {
         b1.style.background = "";
         b2.style.background = "green";  }
    

    Live example:

    JS Fiddle - click the buttons and see how the colors change

    评论
    解决 无用
    打赏 举报
  • drd94483 2014-11-11 10:16

    in the button you can call a jquery function like

    <input type="button" onClick=colorchange();>
    

    /* in the jquery function you can do.*/

    function colorchange(){
    $(this).css('background-color','#000000');
    }
    
    评论
    解决 无用
    打赏 举报
  • duan1982453 2016-09-09 00:39

    $('button').on("click",function(){  
      //$('button').not(this).removeClass();
      $(this).toggleClass('active');
      
      });
    .active{background-color:red;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button>1</button>
    <button>2</button>
    <button>3</button>

    </div>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题