Jump to content

NCPlayz

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by NCPlayz

    How to start off on id

    in HTML/XHTML

    Posted

    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.

×
×
  • Create New...