knowledge Point : JS in the return can not make the JS program stop or jump out of execution , will continue to execute down. To let the JS program stop or jump out can be used to return False .
Code:
<!--------------------------------------------- HTML---------------------------------------------------------------------------------->
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>html3</title>
<meta name= "description" content= "" >
<meta name= "Author" content= "Administrator" >
<style type= "Text/css" >
. btn {
Background-color: #337ab7;
}
. masthead {
Background-color:darken (#428bca, 6.5%);
}
</style>
<script type= "Text/javascript" src= "Jquery-3.2.1.min.js" ></script>
<link rel= "stylesheet" href= "Https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script type= "Text/javascript" src= "Https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></ Script>
<script type= "Text/javascript" >
$ (function () {
$ ("#btn2"). Click (function () {
var v = $ (this). Text (). Trim ();
if (' middle ' = = v) {
$ (this). Text (' des '). Siblings (). addclass (' disabled ');
} else {
$ (this). Text (' Middle '). Siblings (). Removeclass (' disabled ');
}
});
$ (' #btn1 '). Click (function () {
var v = $ (' #btn2 '). Text (). Trim ();
if (' des ' = = v)
return false;
Alert (111);
});
$ (' #btn3 '). Click (function () {
var v = $ (' #btn2 '). Text (). Trim ();
if (' des ' = = v)
return false;
Alert (222);
});
});
</script>
<body>
<div>
<div class= "Btn-group" role= "group" >
<button type= "button" id= "Btn1" class= "btn Btn-default Masthead" >
Left
</button>
<button type= "button" id= "btn2" class= "btn Btn-default" >
Middle
</button>
<button type= "button" id= "Btn3" class= "btn Btn-default" >
Right
</button>
</div>
</div>
</body>
<!--------------------------------------------- HTML---------------------------------------------------------------------------------->
Jquery+bootstrap make a switch (mutex selection)