marc254 Posted October 28, 2016 Share Posted October 28, 2016 Hello all I found this code for tabs on http://www.w3schools.com that I want to use for my chrome extension. The problem is that chrome does not allow inline javascript for extension. I am wondering how to modify the code and keep the behavior same (take off the javascript from a-tag). Thanks in advance for your help <ul class="tab"> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</a></li> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> </ul> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> /* Style the list */ ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Float the list items side by side */ ul.tab li {float: left;} /* Style the links inside the list items */ ul.tab li a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /* Change background color of links on hover */ ul.tab li a:hover {background-color: #ddd;} /* Create an active/current tablink class */ ul.tab li a:focus, .active {background-color: #ccc;} /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2016 Share Posted October 28, 2016 Step 1: Prepare your HTML <ul class="tab" id="tabs"> <li><a href="#London">London</a></li> Step 2: Assign event listeners in your Javascript file. (addEventListener assigns events to elements without cluttering your page's HTML) var links = document.getElementById("tabs").getElementsByTagName("a"); for(var i = 0; i < links.length; i++) { links[i].addEventListener("click", openCity, false); } Step 3: Get the data from the link that was clicked in the event handler. (Learn about the hash property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement ) function openCity(evt) { // Get city name from link var cityName = evt.currentTarget.hash.substring(1); // Declare all variables var i, tabcontent, tablinks; Link to comment Share on other sites More sharing options...
marc254 Posted October 29, 2016 Author Share Posted October 29, 2016 Hello Foxy Mod Thank you so much for your help. That's is the solution I was looking for and it works perfectly now. Kind regards 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