How to start off on id

NCPlayz · April 1, 2017

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">
<head>
    <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>
</head>
<body>
<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>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
    <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>

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

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

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
</div>
<div id="News" class="tabcontent">
  <h3>News</h3>
  <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>
  <hr>
</div>
<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>
  <hr>
</div>
<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>
  <hr>
</div>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
    <script>
var slideIndex = 0;
showSlides();

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";  
    }
    slideIndex++;
    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
}
</script>
    <script>
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", "");
    }
}
</script>
    <script>
jQuery("#menu li a").click(function(){
            var page_url = jQuery(this).attr("href")
            jQuery(".wide_main").html("<p>loading...</p>");
            jQuery(".wide_main").load( page_url + ' #home');
});
</script>
  </body>
</html>

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

Sign In

How to start off on id

Recommended Posts

NCPlayz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity