点击转盘滑动链接时按钮的颜色变化
问题描述:
我有一个引导转盘和一系列顶部按钮,代表组织提供的某些服务。我试图在这里实现两件事:点击转盘滑动链接时按钮的颜色变化
- (这一个完成)当用户点击按钮A,然后滑动链接到按钮A出现,并且按钮A的颜色改变,指示其活动。
- (此处存在问题)当幻灯片A从幻灯片B或其中任何一个更改时,则按钮A(链接到幻灯片A)的颜色应自动更改,以指示其各自的幻灯片已被点击。
正如你可以在此图像中看到,当按钮点击它会变成蓝色和幻灯片链接到它的出现
这是我的代码看起来像
<nav1>
<ul class="nav1">
<li><a href="#" data-target="#myCarousel1" data-slide-to="0" class="image1"></a>
<h4>Analytics & <br> Optimization</li>
<li><a href="#" data-target="#myCarousel1" data-slide-to="1" class="image2"></a>
<h4>Design<br> Services</h4></li>
<li><a href="#" data-target="#myCarousel1" data-slide-to="2" class="image4"></a>
<h4>Web & Mobile<br> Technology</h4></li>
<li><a href="#" data-target="#myCarousel1" data-slide-to="3" class="image3"></a>
<h4>Online <br> Marketing</h4></li>
<li><a href="#" data-target="#myCarousel1" data-slide-to="4" class="image5"></a>
<h4>Cyber<br> Security</h4></li>
<li><a href="#" data-target="#myCarousel1" data-slide-to="5" class="image6"></a>
<h4>Digital<br> Transformation</h4></li>
</ul>
</nav1>
<div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="clearfix"><img class="img2" src="assets/images/analysis.png">
</div>
</div>
</div>
等..
风格:
.nav1 a:active, .nav1 a:focus {
text-decoration: none;
color: #8C9EFF;
background: #80D8FF;
}
我相信它必须做与slide.bs功能,但我无法弄清楚如何!
答
一个Javascript的例子。这是有限的,因为我没有所有的代码。
您将绑定到旋转木马的幻灯片动作,然后找到图像类的正确实例,并将活动类添加到它并找到具有活动类的一个,并将其删除。
`$('#myCarousel1').on('slid.bs.carousel', function (event) {
var nextactiveslide = $(event.relatedTarget).index();
var $btns = $(".nav1");
var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
$btns.find("div[class^='image']").removeClass("active");
$active.find("div[class^='image']").addClass("active");
});`
注意原单液从How to change customized carousel indicator background color?来到我只是修改,使其能够使用类和ID。
当你点击下一个/ prev控件时,你的类没有被激活,因为它们没有包含在链接/按钮的样式中。你需要修改你的CSS来包含控件,或者点击添加一个活动类到各自的JS按钮。当我回家时,我可以提供更多帮助,我现在正在使用我的手机 –
感谢@Orlando提出的问题,我该怎么做? –
你想使用JavaScript还是CSS?使用CSS可能需要对html进行一些修改 –