Jump to content

Transfer inline javascript to external file

Recommended Posts

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>

<div id="London" class="tabcontent">
  <p>London is the capital city of England.</p>

<div id="Paris" class="tabcontent">
  <p>Paris is the capital of France.</p> 

<div id="Tokyo" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
/* 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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...