Javascript 更改不同转盘上的导航栏字体颜色
我真的不知道如何处理这个问题,所以请帮助我 我有一个完整的页面滑块(在主页上)在这个项目。在滑块内,我有5个不同图片的项目 我想更改第一个幻灯片/旋转木马项目上导航栏文本的颜色,其余的可以看起来相同。第一张幻灯片应为灰色,最后4张幻灯片上导航栏的文本应为白色 我还想更改导航栏内的徽标(在第一张幻灯片上它应该是灰色的,在最后4张幻灯片上它也应该是白色的。我有2个PNG来完成这项工作。) 这里有两张图片来说明我想做什么: HTML:Javascript 更改不同转盘上的导航栏字体颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我真的不知道如何处理这个问题,所以请帮助我 我有一个完整的页面滑块(在主页上)在这个项目。在滑块内,我有5个不同图片的项目 我想更改第一个幻灯片/旋转木马项目上导航栏文本的颜色,其余的可以看起来相同。第一张幻灯片应为灰色,最后4张幻灯片上导航栏的文本应为白色 我还想更改导航栏内的徽标(在第一张幻灯片上它应该是灰色的,在最后4张幻灯片上它也应该是白色的。我有2个PNG来完成这项工作。) 这里有两张图片来说明我想做什么: HTML: 切换导航 时尚 时尚 美女 美术
切换导航
-
-
-
-
时尚
时尚
美女
美术
你能帮我从这个开始吗
提前谢谢你 我认为您尝试做的与fullPage.js类似,它允许一个完整的页面滑块,我相信使用一些基本的CSS可以实现所需的颜色变化功能 .carousel-inner>.item:first-child h2{color:black;}我假设这是您使用的滑块: 更改第一张幻灯片上文本的颜色不是问题(请参见下面的示例)。然而,我不认为这个滑块有一个回调函数来返回它所在的幻灯片。根据您在哪个幻灯片上,需要更改导航栏的字体颜色。因此,我认为您必须寻找另一个完整的页面滑块,使您可以这样做
/*
*启动引导-完全滑块(http://startbootstrap.com/)
*版权所有2013-2016启动引导
*麻省理工学院授权(https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
html,
身体{
身高:100%;
}
旋转木马
.项目,
.主动{
身高:100%;
}
.旋转木马内部{
身高:100%;
}
/*背景图像是使用内联CSS在HTML中设置的,而不是在这里*/
.填充{
宽度:100%;
身高:100%;
背景位置:中心;
-webkit背景尺寸:封面;
-moz背景尺寸:封面;
背景尺寸:封面;
-o-背景尺寸:封面;
}
页脚{
利润率:50px0;
}
完全滑块-启动引导模板
切换导航
-
-
-
-
时尚(此文本为灰色)
时尚(此文本为白色)
美女
美术
$('.carousel')。carousel({
间隔:5000//改变速度
})
完全正确。通过使用or。查看回调演示和有关状态类的视频教程。
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="navbarmargin container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><img src="muszerfal_elements/img/menu2.png" style="max-width: 38px; padding-right: 4px; margin-top: 6px;"/>
</button>
<a class="navbar-brand page-scroll" href="index.html">
<img class="logo" src="img/final_2.png">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="navbartext nav navbar-nav navbar-right">
<li>
<a href="works.html">Works</a>
</li>
<li>
<a href="personal.html">Personal</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slider_1.jpg');" alt="Slide 1"></div>
<div class="carousel-caption caption1">
<h2>Fashion</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slider_3.jpg');" alt="Slide 2"></div>
<div class="carousel-caption caption2">
<h2>Fashion</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slider_4.jpg');" alt="Slide 3"></div>
<div class="carousel-caption caption3">
<h2>Beauty</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slider_5.jpg');" alt="Slide 3"></div>
<div class="carousel-caption caption4">
<h2>Fine Art</h2>
</div>
</div>
</div>
</header>