Переключить ссылку/цвет кнопки на новую кнопку

Я пытаюсь импортировать некоторые настраиваемые кнопки в приложение для маркетинговых исследований. Я хотел бы настроить некоторые кнопки в стиле 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>

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; 
}

источник

2013-05-25 Robert Anderson

Во-первых, у вас есть два элемента с одинаковыми id; это недопустимо HTML: a idmust быть уникальным в документе. Если вы хотите, чтобы несколько элементов имели одни и те же стили, используйте вместо этого имя class. Тем не менее, я изменен ваш HTML, чтобы:

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

Как для JQuery я хотел бы предложить:

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

JS Fiddle demo.

Вышеприведенные предположения, что элементы всегда будут братьями и сестрами; если они не могут быть:

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

JS Fiddle demo.

Ссылки:

источник

2013-05-25 20:00:28

Удивительный, именно то, что мне нужно! –

Я рад, что помог! знак равно –

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

источник

2013-05-25 20:00:37

Переключить ссылку/цвет кнопки на новую кнопку

ответ

Смежные вопросы