❮ HTML <a> tag
Table of Contents
- Definition and Usage
- Browser Support
- Attribute Values
- Window Location
- Window Location Href
- Window Location Hostname
- Window Location Pathname
- Window Location Protocol
- Window Location Port
- Window Location Assign
- Create Toggleable Tabs
- Fade in Tabs:
- Show a tab by default
- Close a tab
Example
The target attribute specifies where to open the linked document:
<a href="//www.w3schools.com" target="_blank">Visit W3Schools</a>
Try it Yourself »
Definition and Usage
The target attribute specifies where to open the linked document.
Browser Support
target | Yes | Yes | Yes | Yes | Yes |
Syntax
<a target="_blank|_self|_parent|_top|framename">
Attribute Values
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in the named iframe |
❮ HTML <a> tag
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
Window Location
The window.location object can be written without the window prefix.
Some examples:
- window.location.href returns the href (URL) of the current page
- window.location.hostname returns the domain name of the web host
- window.location.pathname returns the path and filename of the current page
- window.location.protocol returns the web protocol used ( or )
- window.location.assign() loads a new document
Window Location Href
The window.location.href property returns the URL of the current page.
Example
Display the href (URL) of the current page:
document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;
Result is:
Try it Yourself »
Window Location Hostname
The window.location.hostname property returns the name of the internet host (of the current page).
Example
Display the name of the host:
document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;
Result is:
Try it Yourself »
Window Location Pathname
The window.location.pathname property returns the pathname of the current page.
Example
Display the path name of the current URL:
document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;
Result is:
Try it Yourself »
Window Location Protocol
The window.location.protocol property returns the web protocol of the page.
Example
Display the web protocol:
document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;
Result is:
Try it Yourself »
Window Location Port
The window.location.port property returns the number of the internet host port (of the current page).
Example
Display the name of the host:
document.getElementById("demo").innerHTML =
"Port number is " + window.location.port;
Result is:
Try it Yourself »
Most browsers will not display default port numbers (80 for http and 443 for https)
Window Location Assign
The window.location.assign() method loads a new document.
Example
Load a new document:
<html>
<head>
<script>
function newDoc() {
window.location.assign("//www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Load new document" title="newDoc()">
</body>
</html>
Try it Yourself »
Learn how to create tabs with CSS and JavaScript.
Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:
- London
- Paris
- Tokyo
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Try it Yourself »
Create Toggleable Tabs
Step 1) Add HTML:Example
<!-- Tab links -->
<div
class="tab">
<button class="tablinks" title="openCity(event, 'London')">London</button>
<button class="tablinks" title="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" title="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<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>
Create buttons to open specific tab content. All <div> elements with class="tabcontent" are hidden by default (with CSS & JS). When the user clicks on a button - it will open the tab content that "matches" this button.
Step 2) Add CSS:Style the buttons and the tab content:
Example
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline:
none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top:
none;
}
Example
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 button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className
+= " active";
}
Try it Yourself »
Fade in Tabs:
If you want to fade in the tab content, add the following CSS:
Example
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
Try it Yourself »
Show a tab by default
To open a specific tab on page load, use JavaScript to "click" on the specified tab button:
Example
<button class="tablinks" title="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Try it Yourself »
Close a tab
If you want to close a specific tab, use JavaScript to hide the tab with a click of a button:
Example
<!-- Click on the <span> element to close the tab -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<span title="this.parentElement.style.display='none'">x</span>
</div>
Try it Yourself »
Tip: Also check out How To - Vertical Tabs.