Question

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

图片幻灯片是自动的，在页面的右侧我有一个带有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");

这适用于所有按钮的颜色不仅仅改变一次的问题。

所有按钮都位于div，其中包含showcase-thumbnail-content个课程我考虑过为每个按钮创建一个单独的div，但我的主要问题是：

如何在幻灯片显示“picture1”时只有“button1”才能更改背景颜色？

如果需要更多信息，我可以尝试尽我所能。

编辑：

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

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中的相同，修改程序如上所示。

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

Answer 1

fiddle中的示例。 jquery脚本示例如下：

$(".button").click(function() {
  if ($(this).hasClass('active')==true)
  {
     $(this).removeClass("active"); 
     $(this).addClass("passive"); 
  }
  else
  {
    $(this).addClass("active"); 
    $(this).removeClass("passive"); 
  }
 });

Answer 2

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

似乎我错过了演示中的一些代码。

其中包含以下脚本：

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;

        }

希望这将有助于其他人！

如何指定更改背景颜色jquery的元素

2 个答案: