Question

如何更改按钮文本和类，如切换，默认为蓝色，文本显示onlick它应更改为隐藏白色按钮背景。

<button class="btn exam-int-btn">Show</button>

jsFiddle here

Answer 1

使用<span>

<button class="btn exam-int-btn">
<span>Show</span>
<span style="display:none">Hide</span>
</button>

CSS：

.white {background-color:#fff !important;color:#000}

jQuery的：

$(document).ready(function() {
    $('button').on('click',function() {
        $(this).toggleClass('white').find('span').toggle();
    });
});

小提琴： https://jsfiddle.net/nop97njv/

Answer 2

＆＃13;

$('button').on('click',function(){
    if(!$(this).hasClass('red')){
       $(this).addClass('red').text('Enrolled');
    }else{
       $(this).removeClass('red').text('Enroll');
    }
	
})

＆＃13;

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.exam-int-btn.red{
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

＆＃13;

Answer 3

你想要下面的例子???

$('button').on('click',function(){
  $(this).toggleClass("show hide");
})

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.show{
   background-color: #2196F3;
}
.hide{
   background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

Answer 4

检查以下小提琴

你在找这个吗？

http://jsfiddle.net/yogesh078/Bnuy7/2174/

    var onClick = function() {
    var btn= document.getElementById('btnEnroll');
    var className = btn.getAttribute("class");
  if(className=="exam-int-btn") {
    btn.className = "white";
  }
  else{
    btn.className = "exam-int-btn";
  }

};

$('#btnEnroll').click(onClick);

Answer 5

您可以使用：active

.exam-int-btn:active {
    --changes--
}

从这里得到它： Can I have an onclick effect in CSS?

但是，这只会在按住鼠标按钮时应用样式。应用样式并将其应用于onclick的唯一方法是使用一些JavaScript。

Answer 6

按钮

<button class="show">Show</button>

Javascript / jQuery

 `$( ".show" ).click(function() {
     $( this ).removeClass( "show" ).addClass("hide");
     $(this).html('Hide');
  });

  $( ".hide" ).click(function() {
      $( this ).removeClass( "hide" ).addClass("show");
      $(this).html('Show');
  });`

CSS - 做你的CSS线

Answer 7

你可以使用jQuery做这样的事情：

＆＃13;

$('#my-btn').click(function(){
  //change text
  $(this).text('changed text here');
   
  //change text & background color
  $(this).css({
      'color' : '#000',
      'background-color' : '#fff'
  });
})

＆＃13;

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="my-btn" class="btn exam-int-btn">Enroll</button>

＆＃13;

Answer 8

希望这会有所帮助

＆＃13;

$('button').on('click',function(){
 
   $(this).text($(this).text() == "Enroll" ? "Enrolled": "Enroll");
	 $(this).toggleClass('btn-toggle')
})

＆＃13;

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-toggle{
background-color:white;
color:#2196F3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

＆＃13;

Answer 9

很简单，这是我的解决方案：

    var flag = false; //default text show, background-color: blue
    $("button").click(function(e){
       e.preventDefault();
      if(flag==true){
        flag=false;
      <!-- change text, background-color -->
        $(this).text("Show");
     $(this).css("background-color","blue");
      }else{
    
     flag=true;
        $(this).text("Hide");
     $(this).css("background-color","white");
    }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="background-color:blue">Show</button>

如何更改按钮文本和类，如切换

9 个答案: