2

对不起，如果这个问题被问了很多。我目前正在一个将拥有自定义画廊的网站上工作。在所有现在要卡住的事情中，它的画廊页面指示器。

在此页面上，左侧部分将由“画廊”组成，每个“页面”显示 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"。单击任何其他点（当前选择除外）后，当前选定的点需要恢复为“未选择的事件库”，并且单击的点呈现“已选择的事件库”

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

4 回答 4

4

我建议在您的所有画廊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');
});

示例小提琴

于 2012-12-10T16:23:24.650 回答
0

像这样使用 jQuery：

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

例如

于 2012-12-10T16:24:25.917 回答
0

如果你有一组元素：

<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
})
于 2012-12-10T16:25:39.983 回答
0

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

$(function() {
    $(".even-gallery-unselected").on("click", function() {
        this.removeClass("event-gallery-unselected")
            .addClass("event-gallery-selected");
    });
});
于 2012-12-10T16:26:09.717 回答