php - 单击元素时切换 CSS 样式

Question

很抱歉这个问题被问了很多次。我目前正在一个网站上工作，该网站将有一个自定义画廊。在所有现在卡住的东西中，它是图库页面指示器。

在此页面上，左侧部分将由“画廊”组成，每“页”显示 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-selected"。单击任何其他点(当前选择除外)后，当前选定的点需要恢复为“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>

刚刚开始工作。

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