Jump to content

How to start off on id

Recommended Posts

Hello, this is my first time posting, and I wanted to know how to start of on an id using the W3Schools Tab function. Here is the code!

<!DOCTYPE html>
<html lang="en">
    <title>(null)'s Website</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link href="V1.css/Home.V1.css" rel="stylesheet">
    <link href="V1.css/Home.V1.Slideshow.css" rel="stylesheet">
    <script type="text/javascript" src="V1.js/Tabs.js"></script>
    <script type="text/javascript" src="V1.js/Slideshow.js"></script>
    <script src="https://www.w3schools.com/lib/w3data.js"></script>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Home')">Home</button>
  <button class="tablinks" onclick="openCity(event, 'News')">News</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

<div id="Home" class="tabcontent">
    <h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="V1.png/NEW!.png" style="width:100%">
  <div class="text">Loving the look of our new website?</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://img.clipartfest.com/182119c47939e54a12e23325c2153d0d_garfield-clip-art-garfield-clipart_500-500.jpeg" style="width:100%">
  <div class="text">Caption Two</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://s-media-cache-ak0.pinimg.com/736x/35/a5/26/35a526aa3f44fb009da502db1127a82c.jpg" style="width:100%">
  <div class="text">Caption Three</div>


<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
<div id="News" class="tabcontent">
  <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Updates</button>
<div id="Demo1" class="w3-container w3-hide w3-animate-zoom">
  <h4>Section 1</h4>
  <p>Some text..</p>
<button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Announcements</button>
<div id="Demo2" class="w3-container w3-hide w3-animate-zoom">
  <h4>Section 2</h4>
  <p>Some text..</p>
<button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-black w3-left-align">Blog</button>
<div id="Demo3" class="w3-container w3-hide w3-animate-zoom">
  <h4>Section 3</h4>
  <p>Some text..</p>
<div id="Tokyo" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
var slideIndex = 0;

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 10000); // Change image every 2 seconds
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
jQuery("#menu li a").click(function(){
            var page_url = jQuery(this).attr("href")
            jQuery(".wide_main").load( page_url + ' #home');

What I want to start off on when the html file is loaded, is the 'home' id.

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...