ForM4iN Posted December 22, 2016 Share Posted December 22, 2016 Does it work to set the first tab red like it is, the second blue, and the third green? http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active Link to comment Share on other sites More sharing options...
dsonesuk Posted December 23, 2016 Share Posted December 23, 2016 Not in present state but with function openCity(evt, cityName) { var Tabcolor=['red','blue','green'];// set colours for tabs same sequence order the tabs are in var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].dataset.indexRef=i; var tabColorRef=Tabcolor[tablinks[i].getAttribute("data-index-ref")]; tablinks[i].className = tablinks[i].className.replace(" w3-"+tabColorRef, ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-"+Tabcolor[evt.currentTarget.getAttribute("data-index-ref")]; } Yes! 1 Link to comment Share on other sites More sharing options...
ForM4iN Posted December 23, 2016 Author Share Posted December 23, 2016 Not in present state but with function openCity(evt, cityName) { var Tabcolor=['red','blue','green'];// set colours for tabs same sequence order the tabs are in var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].dataset.indexRef=i; var tabColorRef=Tabcolor[tablinks[i].getAttribute("data-index-ref")]; tablinks[i].className = tablinks[i].className.replace(" w3-"+tabColorRef, ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-"+Tabcolor[evt.currentTarget.getAttribute("data-index-ref")]; } Yes! Thank you so much!! Link to comment Share on other sites More sharing options...
ForM4iN Posted December 23, 2016 Author Share Posted December 23, 2016 Is there also a function, where i can use scrollup and scrolldown to switch the tabs right and left? Imean when i sroll down the first tab switches to the second? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 23, 2016 Share Posted December 23, 2016 Not this time, and why? Would you want that. Link to comment Share on other sites More sharing options...
ForM4iN Posted December 23, 2016 Author Share Posted December 23, 2016 I want the tabs to be my menu. And to have more accessibility it would be nice to scroll between the tabs Link to comment Share on other sites More sharing options...
ForM4iN Posted December 24, 2016 Author Share Posted December 24, 2016 Or does this script also work with the normal navigation? So that my first link is green my second is blue... http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_active And it should work on a onepage. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 24, 2016 Share Posted December 24, 2016 It does not use JavaScript, you would just add required text colour class to link that represents current page you have landed on. 1 Link to comment Share on other sites More sharing options...
ForM4iN Posted December 25, 2016 Author Share Posted December 25, 2016 It does not use JavaScript, you would just add required text colour class to link that represents current page you have landed on. And how do i do this with a onepager and a #example url navigation? sry for asking so much Link to comment Share on other sites More sharing options...
dsonesuk Posted December 25, 2016 Share Posted December 25, 2016 Just change " w3-" to " w3-text-" to target link text instead of background colour from post#2 code. Link to comment Share on other sites More sharing options...
ForM4iN Posted December 25, 2016 Author Share Posted December 25, 2016 (edited) But isnt the link-color then always black? i want it just in the specified section! Could you give me an example please i dont get it :/ Edited December 25, 2016 by ForM4iN Link to comment Share on other sites More sharing options...
dsonesuk Posted December 25, 2016 Share Posted December 25, 2016 No it will change to w3css text colour the colour will the colour in used in array of colours w3-text-red for red text, w3-text-blue for blue text and so on. Link to comment Share on other sites More sharing options...
ForM4iN Posted December 25, 2016 Author Share Posted December 25, 2016 Not that we talk different things: If i have this navbar: <ul class="w3-navbar w3-dark-grey w3-xlarge"> <li><a class="w3-hover-black" href="#0">Home</a></li> <li><a class="w3-hover-blue" href="#1">Link 1</a></li> <li><a class="w3-hover-red" href="#2">Link 2</a></li> <li><a class="w3-hover-yellow" href="#3">Link 3</a></li> </ul> and these ids: <div id="0" class="w3-black"> 0 </div> <div id="1" class="w3-blue"> 1 </div> <div id="2" class="w3-red"> 2 </div> <div id="3" class="w3-yellow"> 3 </div> i want, that when i am in id 1that the link text color which was white before to be blue! and when i am in id 2 i want id 1 to be white again and id2 to be red. what do i have to do? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 25, 2016 Share Posted December 25, 2016 The code uses class name 'tablink' to reference the anchor link elements and class name 'city' for content container elements, withouts these to refer to nothing is going to happen so you have to make sure these are present. It then uses other class name on the tablinks anchor element to manipulate to target background " w3-"+arraycolor[x] where arraycolor will be array of colour names and [x] will be index ref to a specific colour, by changing " w3-" to " w3-text-"+arraycolor[x] with colour array ref it will now change the anchor link text colour. So the sooner YOU begin setting up the code as described, the sooner YOU will see the result you require. Link to comment Share on other sites More sharing options...
ForM4iN Posted December 26, 2016 Author Share Posted December 26, 2016 (edited) Okay yeah sry! It works for the tabs! But then the scroll function is disabled! Can also do this with scrolling from id to id and the color changes? Like this: (scrollspy?) http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h but with a different active color in the menu! Edited December 26, 2016 by ForM4iN Link to comment Share on other sites More sharing options...
dsonesuk Posted December 26, 2016 Share Posted December 26, 2016 Yes! It should as long as the links have the required class name, and onclick event to call required function. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 26, 2016 Share Posted December 26, 2016 Of course you will need to include bootstrap and w3css together, since the latest link you provided is a Bootstrap example, the code I provided is for w3css, which may course a bit of conflict. Link to comment Share on other sites More sharing options...
ForM4iN Posted December 26, 2016 Author Share Posted December 26, 2016 Of course you will need to include bootstrap and w3css together, since the latest link you provided is a Bootstrap example, the code I provided is for w3css, which may course a bit of conflict. Yes! It should as long as the links have the required class name, and onclick event to call required function. The Problem was, that your code is focused on tabs, isnt it? Because when i clicked that link i couldnt scroll anymore and could only see the content of the linked id. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 26, 2016 Share Posted December 26, 2016 NO! the code does not affect scrolling, it just changes text or background colour of tabs, menu links, scrolling will not happen if there is not enough content that warrants scrolling, or you are using position absolute on content which is taken out of the flow of the normal flow of content and therefore does not occupy any area to warrant any scrolling either. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now