❮ HTML <a> tag Show Table of Contents
ExampleThe target attribute specifies where to open the linked document: <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a> Try it Yourself » Definition and UsageThe Browser Support
Syntax<a target="_blank|_self|_parent|_top|framename"> Attribute Values
❮ HTML <a> tag The Window LocationThe Some examples:
Window Location HrefThe ExampleDisplay the href (URL) of the current page: document.getElementById("demo").innerHTML = Result is: Try it Yourself » Window Location HostnameThe ExampleDisplay the name of the host: document.getElementById("demo").innerHTML = Result is: Try it Yourself » Window Location PathnameThe ExampleDisplay the path name of the current URL: document.getElementById("demo").innerHTML = Result is: Try it Yourself » Window Location ProtocolThe ExampleDisplay the web protocol: document.getElementById("demo").innerHTML = Result is: Try it Yourself » Window Location PortThe ExampleDisplay the name of the host: document.getElementById("demo").innerHTML = Result is: Try it Yourself » Most browsers will not display default port numbers (80 for http and 443 for https) Window Location AssignThe ExampleLoad a new document: <html> <input type="button" value="Load new document" onclick="newDoc()"> </body> Try it Yourself » Learn how to create tabs with CSS and JavaScript. TabsTabs are perfect for single page web applications, or for web pages capable of displaying different subjects:
LondonLondon is the capital city of England. ParisParis is the capital of France. TokyoTokyo is the capital of Japan. Try it Yourself » Create Toggleable TabsStep 1) Add HTML:Example<!-- Tab links --> <!-- Tab content --> <div id="Paris" class="tabcontent"> <div id="Tokyo" class="tabcontent"> Create buttons to open specific tab content. All <div> elements with Step 2) Add CSS:Style the buttons and the tab content: Example /* Style the tab */ /* Style the buttons that are used to open the tab content */ /* Change background color of buttons on hover */ /* Create an active/current tablink class */ /* Style the tab content */ Step 3) Add JavaScript:Example function openCity(evt, cityName) { // Get all elements with class="tabcontent" and hide them // Get all elements
with class="tablinks" and remove the class "active" // Show the current tab, and add an "active" class to the button that opened the tab Try it Yourself » Fade in Tabs:If you want to fade in the tab content, add the following CSS: Example .tabcontent { /* Go from zero to full opacity */ Try it Yourself » Show a tab by defaultTo open a specific tab on page load, use JavaScript to "click" on the specified tab button: Example<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <script> Try it Yourself » Close a tabIf 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"> Try it Yourself » Tip: Also check out How To - Vertical Tabs. |