Javascript 在新按钮单击时切换链接/按钮颜色_Javascript_Jquery_Css

Javascript 在新按钮单击时切换链接/按钮颜色

javascript jquery css

Javascript 在新按钮单击时切换链接/按钮颜色,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试将一些自定义按钮导入营销调查应用程序。我想用CSS和Jquery设置一些具有特定功能的按钮我需要有按钮改变外观，并停留在点击。我已经能够使用下面的代码实现这一点我需要帮助创建一个函数，将以前选择的按钮返回到原始状态，同时将新选择的按钮更改为“单击”状态详细的帮助将不胜感激 HTML: <body> <a href="#" ID="button">Test Link 1</a><link href="newStyleSheet.css" r

我正在尝试将一些自定义按钮导入营销调查应用程序。我想用CSS和Jquery设置一些具有特定功能的按钮

我需要有按钮改变外观，并停留在点击。我已经能够使用下面的代码实现这一点

我需要帮助创建一个函数，将以前选择的按钮返回到原始状态，同时将新选择的按钮更改为“单击”状态

详细的帮助将不胜感激

HTML:

<body>
<a href="#" ID="button">Test Link 1</a><link href="newStyleSheet.css" rel="stylesheet" type="text/css" />

<a href="#" ID="button">Test Link 2</a><link href="newStyleSheet.css" rel="stylesheet" type="text/css" />

<script src="jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
  $(document).ready(function(){
     $('a').click(function(){
       $ (this).toggleClass('clicked');
     });
  });
</script>
</body>

a#button{
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    width: 160px;
    padding-top: 6px;
    padding-right: 24px;
    padding-bottom: 6px;
    padding-left: 24px;
    text-align: center;
    vertical-align: middle;
    margin-right: 30px;
    margin-left: 30px;
}
a.clicked#button{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e5c9ab), color-stop(1, #d95936) );
    background:-moz-linear-gradient( center top, #e5c9ab 5%, #d95936 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5c9ab', endColorstr='#d95936');
    background-color:#dfdfdf;
    text-shadow:1px 1px 0px #777777;
    color:#ffffff;
}

首先，有两个元素具有相同的

id

；这是无效的HTML:

id

在文档中必须是唯一的。如果希望多个元素共享相同的样式，请改用
类
-名称。也就是说，我已将您的HTML修改为：

<a href="#" class="button">Test Link 1</a> <a href="#" class="button">Test Link 2</a>

以上假设元素始终是兄弟元素；如果可能不是：

$('a.button').click(function(e){ e.preventDefault(); $('a.clicked').removeClass('clicked'); $(this).addClass('clicked'); });

参考资料：

太棒了，正是我需要的！我很高兴能帮上忙！=]
$('a.button').click(function(e){ e.preventDefault(); $('a.clicked').removeClass('clicked'); $(this).addClass('clicked'); });

$(document).ready(function(){ $('a').click(function(){ // reset all buttons to un-clicked state $('a').removeClass('clicked'); $(this).toggleClass('clicked'); }); });