I'm using scrollpsy from bootstrap.
I made an example of what I'm trying to do:
All is good, he passing one active class to li
at each section id, but I want change the background at header at each section
For example:
if #studio
background-color: #0915ff;
if #green
background-color: 085606;
$(function() {
var $spy = $('.nav');
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find("a").attr("href");
alert (header);
$studio = $('#studio')
$duplex = $('#duplex')
$tower = $('#tower')
If( $(header) == "#studio" ) window.alert( “ALERT ACTIVED”);
});
});
I'm not familiar with scrollspy but I've updated your fiddle http://jsfiddle.net/te3V4/18/
Basically on each tag I've added a "data-background" property which a value of the color you want. I reset all the colors on when it runs, and the assign the correct color using the following code.
var $spy = $('.nav');
var first = $('a', '#navbar')[0];
$(first).css({'background-color':$(first).data('background')});
$spy.bind("activate", function(e) {
$('a', '#navbar').css({'background-color':'inherit'});
var header = $(e.target).find("a");//.attr("hr");
$(header).css({'background-color': header.data('background')});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.