Hi there and ty so I did it again and I have used the edited templates from velo and again even though the code is correct and shows no errors does not do anything once on my site. I have tried other browsers too …
the boxes are their, the hand scrolls over but the tabs do not change.
$w.onReady( function () {
const yellowColor = “#E7AE01” ; // For selected tab
const whiteColor = “#FFFFFF” ; // For other tabs
$w( '#DNButton' ).onClick(() => {
$w( '#DNStatebox' ).changeState( "DNState" );
});
$w( '#keyfButton' ).onClick(() => {
$w( '#DNStatebox' ).changeState( "KeyState" );
});
$w( '#specButton' ).onClick(() => {
$w( '#DNStatebox' ).changeState( "SpecState" );
});
$w( '#photoButton' ).onClick(() => {
$w( '#DNStatebox' ).changeState( "PhotoState" );
});
$w( "#DNStatebox" ).onChange((event) => {
const buttonNames = [ “DN” , “keyf” , “spec” , “photo” ];
buttonNames.forEach(buttonName => {
let button = $w( “#” + buttonName + “Button” ); // e.g. $w(“#keyboardsButton”)
let state = buttonName + “State” ; // e.g. keyboardsState
if (event.target.currentState.id === state) {
button.style.backgroundColor = yellowColor;
} else {
button.style.backgroundColor = whiteColor;
}
});
});
});