在新按钮上单击切换链接/按钮颜色 [英] Toggle link/button color on new button click

查看:110
本文介绍了在新按钮上单击切换链接/按钮颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将一些自定义按钮导入市场调查应用程序.我想设置一些具有CSS和Jquery样式的按钮,并具有某些特定功能.

I am trying to import some customized buttons into a marketing survey application. I would like to set up some buttons styled with CSS and Jquery with some specific functionality.

我需要让按钮更改外观并保持点击状态.我已经可以使用下面的代码完成此任务.

I need to have the buttons change appearance and stay on the click. I have been able to accomplish this using the code below.

我需要帮助创建一个函数,该函数可以将先前选择的所有按钮恢复为原始状态,同时将新选择的按钮更改为已单击"状态.

I need help in creating a function that returns any previously selected buttons to the original state while changing the newly selected button to the "clicked" state.

详细的帮助将不胜感激!

Detailed help would be most appreciated!

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>

CSS:

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 在文档中必须是唯一的.如果要让多个元素共享相同的样式,请改用class -name.也就是说,我已经将您的HTML修改为:

First, you've got two elements with the same id; this is invalid HTML: an id must be unique within the document. If you want several elements to share the same styles, use a class-name instead. That said, I've amended your HTML to:

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

对于您的jQuery,我建议:

As for your jQuery I'd suggest:

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

JS Fiddle演示.

以上假设元素将始终是兄弟姐妹;如果可能不是:

The above assumes the elements will always be siblings; if they may not be:

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

JS小提琴演示.

参考文献:

  • addClass().
  • click().
  • Element identifiers: the id and class attributes (W3.org).
  • event.preventDefault().
  • removeClass().
  • siblings().

这篇关于在新按钮上单击切换链接/按钮颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆