单击元素时切换CSS样式
如果这个问题被问了很多次，我很抱歉。我目前在一个网站上工作，将有一个自定义画廊。在现在所有需要坚持的事情中，它是画廊页面指示器。
在此页面上，左侧部分将由一个“画廊”组成，每个“页面”显示6个画廊。http://www.ct-social.com/ctsdev/aff/news-and-events/
画廊上方是小蓝点，它们将用作画廊指示器。创建图库指示器的代码如下：
<?php for ($i=0; $i < $n2; $i++): ?>
<div class="event-gallery-unselected"></div>
<?php endfor; ?>加载后，我希望最左边的点被赋予一个不同的样式，这是归因于class=“事件画廊选择”。在单击任何其他点(当前选定内容除外)时，当前选定的点需要恢复为"event-gallery-unselected“，并且单击的点显示为"event-gallery- selected”
我对PHP比较陌生，对JavaScript和JQuery也很陌生。如果你使用这两种语言中的任何一种作为例子，你能详细解释一下吗？非常感谢你的帮助。
更新代码: CSS
.event-gallery.selected {
position: relative;
top: -0.7em;
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%;
}
.event-gallery {
position: relative;
top: -1.1em;
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}更新的代码JS
<script type="text/javascript">
jQuery(document).ready(function($){
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>我刚把它修好。
回答 4
Stack Overflow用户
发布于 2012-12-11 00:23:25
我建议在你所有的图库div元素上都有一个类。这将允许维护常见的样式，还允许您只有1个单击处理程序。然后，您可以拥有一个单独的selected类，您可以根据需要进行切换。试试这个：
<?php for ($i = 0; $i < $n2; $i++): ?>
<div class="event-gallery"></div>
<?php endfor; ?>.event-gallery {
color: #000; /* default styling ... */
padding: 5px;
}
.event-gallery.selected {
color: #FFF; /* selected item styling ... */
background-color: #C00;
}$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});Stack Overflow用户
发布于 2012-12-11 00:24:26
像这样使用jQuery：
$('divid').click(function(){
$('divid').css('background-image', 'pic2.jpeg');
});例如
Stack Overflow用户
发布于 2012-12-11 00:25:40
如果您有一组元素：
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>我通常是这样处理的：
var $items = $('#wrapper .item');
$('.item').click(function(){
$items.removeClass('active'); // 'reset' the active links
$(this).addClass('active'); // apply the active class to the clicked item
})https://stackoverflow.com/questions/13804856
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号