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.