Question

很抱歉，如果这个问题被提了很多。我目前正在开发一个拥有自定义图库的网站。在现在被卡住的所有事情中，它是画廊页面指示器。

在此页面上，左侧部分将由画廊＆＃34;画廊组成，每个＆＃34;页面＆＃34;显示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 =＆＃34; event-gallery-selected＆＃34;。单击任何其他点（当前选择除外）时，当前选定的点需要恢复为＆＃34; event-gallery-unselected＆＃34;点击的点点击＆＃34; event-gallery-selected＆＃34;

我是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>

现在就开始工作了。

Answer 1

我建议您在所有图库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');
});

Example fiddle

Answer 2

像这样使用jQuery：

$('divid').click(function(){
    $('divid').css('background-image', 'pic2.jpeg');
});

例如

Answer 3

如果您有一组元素：

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

Answer 4

这可以通过jQuery的一些帮助轻松完成。

$(function() {
    $(".even-gallery-unselected").on("click", function() {
        this.removeClass("event-gallery-unselected")
            .addClass("event-gallery-selected");
    });
});

在元素单击上切换CSS样式

4 个答案: