4

我制作了一个简单的网站，其中有幻灯片。

图片幻灯片是自动的，在页面的右侧我有一个带有 6 个按钮的菜单。当我按下“button1”时，会出现“button1”的图片，当我点击“button2”时，会出现“button2”的图片等等。

我想做的事：

当我的幻灯片更改时，6 个按钮之一的背景颜色会发生变化，以表明正在显示的图片与该按钮有关。

例子：

Slideshow:
picture1 appears -----> button1 gets background color changed
picture2 appears -----> button2 gets background changed 
etc.

我的代码：

$(".showcase-thumbnail-content").removeClass("active, passive"); 
$(".showcase-thumbnail-content").addClass("active");

这适用于所有按钮的颜色同时改变的问题，而不仅仅是一个。

所有按钮都在divwith 类中，showcase-thumbnail-content 我曾考虑div为每个按钮创建一个单独的按钮，但我的主要问题是：

当幻灯片上显示“picture1”时，如何使只有“button1”的背景颜色发生变化？

我已经尝试过尽我所能，如果需要更多信息，请询问。

编辑：

由于页面上有很多代码，我不完全知道哪些部分在这里最相关，所以如果有的话1会花时间看看这里：

http://showcase.awkwardgroup.com/index2.html

我正在使用演示 2，并进行了自己的修改。

进行了以下更改：

CSS：

.showcase-thumbnail-content {
    /* padding: 10px;
    text-align: center;
    padding-top: 25px; */

    background: #ededed;
    padding: 5px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    color: #777;
    text-decoration: none;
    font: bold 0.8em arial, sans-serif;
    width: 120px;
    font-size: 130%;
    cursor: hand;
    cursor: pointer;
}
            }
.showcase-thumbnail-content:hover {
    color:#F77B0F!Important;
}

.active {
    background: red;
}

html变化：

展示幻灯片：

<div class="showcase-slide">
            <!-- Put the slide content in a div with the class .showcase-content. -->
            <div class="showcase-content">
                <img src="images/01.jpg" alt="01" />
            </div>
            <!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
            <div class="showcase-thumbnail">
                <!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
                <!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
                <p class="showcase-thumbnail-content">First</p>
                <!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>
            <!-- Put the caption content in a div with the class .showcase-caption -->
            <div class="showcase-caption">
                <h2>Be creative. Get Noticed!</h2>
            </div>
        </div>

// 这对所有六个元素都完成（完全相同）

脚本代码与 demo2 中的相同，但我在上面显示了修改。

如果需要更多信息，请询问。

4

2 回答 2

0

小提琴中的例子。jquery脚本示例如下：

$(".button").click(function() {
  if ($(this).hasClass('active')==true)
  {
     $(this).removeClass("active"); 
     $(this).addClass("passive"); 
  }
  else
  {
    $(this).addClass("active"); 
    $(this).removeClass("passive"); 
  }
 });​
于 2012-12-14T08:22:56.977 回答
0

在朋友的帮助下，我解决了这个问题。

看来我错过了演示中的一些代码。

以下脚本在其中：

if (options.thumbnails)
                    {
                        i = 0;
                        showcase.find('.showcase-thumbnail').each(function()
                        {
                            var object = jQuery(this);
                            object.removeClass('active');
                            if (i === current_id) { object.addClass('active'); }
                            i++;
                        });
                    }

在我的css中：

showcase-thumbnail.active p
        {
            color: blue;

        }

希望这将在未来对其他人有所帮助！

于 2012-12-14T10:00:41.197 回答