I've been building a website using four separate links to replace the content of the home page with the other html's files information. The script works on each individual page where clicking other links erases the information of the site then when clicking the link of the current site, the information reappears. But I cannot get it to use one html site and have the information of all four.
HTML:
<div class="tab">
<button class="tablinks" onclick="openLink(event, 'Home')">Home</button>
<button class="tablinks" onclick="openLink(event, 'Tickets')">Tickets</button>
<button class="tablinks" onclick="openLink(event, 'Map')">Map</button>
<button class="tablinks" onclick="openLink(event, 'Schedule')">Schedule</button>
</div>
<div id="Home" class="tabContent"><br>
<h2 id="person"></h2><br>
<p>Information and content here </p><br>
</div>
<!-- new site information will erase above content and load new page with bottom div -->
<div id="result" class="tabContent">
</div>
JS/JQuery:
$("#result").load("tickets.html #Tickets");
$("#result").load("map.html #Map");
$("#result").load("schedule.html #Schedule");
function openLink(evt, link) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(link).style.display = "block";
evt.currentTarget.className += " active";
}
Ok, the new code:
function eachButtons(a,b) {
var list = document.getElementsByTagName('button');
for (var i in list) {
if (list[i].className === a) {
list[i].onclick = b;
}
}
}
how to use?, look:
eachButtons('class','action');
example:
html:
<body>
<button className="link">google</button>
<button className="link">bing</button>
</body>
script:
function myfunction() {alert('welcome');}
eachButtons('link',myfunction);
this will make a onclick alert for all buttons with link classname.
wrong code input example:
eachButtons('youclass',youfunction(ThisBacketsAreWrong));
Related
There are loads of exmaple of saving tab state with jQuery but not with Vanilla JS - I want to remember last tab state in the event a user leaves and returns to page, refreshes page etc. Would it be better to a sessions variable or is localstorage the best option ?
<html>
<head>
<meta charset="utf-8">
<style>
.red {
background:red;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<div class="bar blue">
<button class="bar-item button tablink red" onclick="openTab(event,'Summary')">Summary</button>
<button class="bar-item button tablink" onclick="openTab(event,'Finance')">Finance</button>
<button class="bar-item button tablink" onclick="openTab(event,'Enquire')">Enquire</button>
<button class="bar-item button tablink" onclick="openTab(event,'Save')">Save</button>
</div>
<div id="Summary" class="container border vehTab">
FIRST TAB
</div>
<div id="Finance" class="container border vehTab" style="display:none">
SECOND TAB
</div>
<div id="Enquire" class="container border vehTab" style="display:none">
THIRD TAB
</div>
<div id="Save" class="container border vehTab" style="display:none">
FOURTH TAB
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("vehTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace("red", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " red";
}
</script>
</body>
</html>
Sessions are destroyed once the user closes the tab or browser. I would suggest localstorage over session storage in your case
Storing in session will be destroyed when the user closes the tab or browser.
Storing in local storage will be present for up to a lifetime until you clear it. If you are using local storage in secured pages (logged in user only has access to it) I suggest that it should be cleared when the user loges out
I have this code that opens it's specific content using buttons or tab. But in my navbar, some buttons of navbar needs to direct in an open tab. I used window.location.hash but still not working.
Is there any other javascript that can open the tab using button links from other pages?
One of my navbar buttons has a code like this:
<a class="dropdown-item" href="service.html#tranSection" style="color: #efdf4e;">transfer</a>
function serviceDisplay(evt, serviceName) {
var i, serviceSection, bar_item;
serviceSection = document.getElementsByClassName("serviceSection");
for (i = 0; i < serviceSection.length; i++) {
serviceSection[i].style.display = "none";
}
bar_item = document.getElementsByClassName("bar_item");
for (i = 0; i < bar_item.length; i++) {
bar_item[i].className = bar_item[i].className.replace(" active", "");
}
document.getElementById(serviceName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Javascript to enable link to tab
var openTab = $(location.hash).filter(".serviceSection");
if (openTab.length) {
$("a[href='" + location.hash + "']").click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="service-bar">
<button onclick="serviceDisplay(event, 'depSection')" type="button" class="bar_item dep-btn" id="defaultOpen">deposit</button>
<button onclick="serviceDisplay(event, 'withSection')" type="button" class="bar_item with-btn">withdraw</button>
<button onclick="serviceDisplay(event, 'tranSection')" type="button" class="bar_item tran-btn">transfer</button>
<button onclick="serviceDisplay(event, 'histSection')" type="button" class="bar_item history-btn">history</button>
</div>
<div id="depSection" class="serviceSection">
DEPOSIT
</div>
<div id="withSection" class="serviceSection">
WITHDRAW
</div>
<div id="tranSection" class="serviceSection">
TRANSFER
</div>
<div id="histSection" class="serviceSection">
HISTORY
</div>
Parse url with a regular expression and use parsed data to open tab
Here is what I have so far, which works fine, but doesn't disappear once another link is activated.
function skillsFunction () {
var x = document.getElementById("mySkills");
if (x.style.display == "none"){
x.style.display = "block"; {}
} else {
x.style.display = "none";
}
}
let openTab = (event, tabNumber) => {
const tabContent = document.getElementsByClassName("tabContent");
for(let tab of tabContent) {
tab.style.display = "none";
}
document.getElementById(tabNumber).style.display = "block";
}
<div class="tabs">
<span class="tab" onclick="openTab(event,1)">Projects</span>
<span class="tab" onclick="openTab(event,2)">Skills</span>
<span class="tab" onclick="openTab(event,3)">Courses</span>
</div>
<div class="mySkills" id="2"></div>
<div class="myCourses" id="3"></div>
<!--START OF PROJECTS WRAPPER-->
<div class="projectsWrapper" id="1">
This is my first time using JavaScript.
Alrighty, first off it is typically not good practice to use HTML onclick="" to handle clicks, so we would rather use JS to attach an event listener.
In the HTML, add the class of tabContent, which was missing, an id to each tab, and add "div" + tabId to each body content (Ids can be whatever you want just keep them the same). Also add display:none to initially start the content closed (probably choose one to start open and leave that without display:none) (And of course change the layout/whatever to fit the rest of your HTML):
Then, in the JS initialize tabs and tabContent, and for each tab add a click event listener which hides every tabContent then displays the one that matches the tabId.
const tabs = document.getElementsByClassName("tab");
const tabContent = document.getElementsByClassName("tabContent");
for(var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function(event) {
for(var i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
var tabId = event.target.id;
document.getElementById("div" + tabId).style.display = "block";
});
}
<span id="PROJECTS" class="tab">Projects</span>
<span id="SKILLS" class="tab">Skills</span>
<span id="COURSES" class="tab">Courses</span>
<div class="mySkills tabContent" id="divSKILLS" style="display:none">
Skills
</div>
<div class="myCourses tabContent" id="divCOURSES" style="display:none">
Courses
</div>
<div class="projectsWrapper tabContent" id="divPROJECTS" style="display:none">
Projects
</div>
Let me know how it goes!
JsFiddle
I've attempted to code vanilla Javascript that opens and closes buttons (tabs) and shows content.
They show the content correctly, but don't hide the content once clicked.
I've 'reverse engineered' the code that the opens the tab, but this code hides the content and the button when clicked.
Clearly my code is wrong, but i feel that i'm so close to achieving what i set out to achieve. So i'm looking to edit the existing code, not try not change anything drastically.
Cheers
function openTab(click, openTab) {
var i;
var content;
var link;
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
links = document.getElementsByClassName("link");
for (i = 0; i < links.length; i++) {
links[i].className = links[i].className.replace("active", "");
}
document.getElementById(openTab).style.display = "block";
for (i = 0; i < links.length; i++) {
click.currentTarget.className += "active";
}
document.getElementById(openTab).style.display = "active";
click.currentTarget.style.display = "none";
}
<div class="tabs">
<button class="link" onclick="openTab(event, 'About')">About</button>
<button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button>
<button class="link" onclick="openTab(event, 'Contact')">Contact</button>
</div>
<div id="About" class="content">
</div>
<div id="Hire" class="content">
</div>
<div id="Contact" class="content">
</div>
The code you posted had some confusing behaviour (such as the buttons disappearing completely). I removed the line that made buttons disappear, as well two different loops that seemed to conflict with each other regarding the class name of the links.
I edited the code down to something simple that displays the content according to the button clicked, but I suspect I've misunderstood something and you're after something else. Maybe you can clarify what's missing?
function openTab(click, openTab) {
var i;
var content;
var wasOpen = document.getElementById(openTab).style.display === "block";
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
if (wasOpen) return;
document.getElementById(openTab).style.display = "block";
}
<div class="tabs">
<button class="link" onclick="openTab(event, 'About')">About</button>
<button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button>
<button class="link" onclick="openTab(event, 'Contact')">Contact</button>
</div>
<div id="About" class="content" style="display:none">
ABOUT CONTENT
</div>
<div id="Hire" class="content" style="display:none">
HIRE CONTENT
</div>
<div id="Contact" class="content" style="display:none">
CONTACT CONTENT
</div>
Explainer:
The changes I made to the html was 1- to add some text in each tab and 2- set all tabs to display:none
Within the javascript:
On click, we have a value for "openTab", representing one of the tabs. The line:
var wasOpen = document.getElementById(openTab).style.display === "block";
Sets a Boolean variable which is true if "openTab"'s display property is set to block.
Then we set all tabs to display:none with the following:
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
And now, depending on whether or not the tab was already open, we either leave the function already, or set the tab to "block"
if (wasOpen) return;
document.getElementById(openTab).style.display = "block";
Tadaaaa!
I'm trying to build a page that the content changes when you click on the tab. I got the basic code from w3school but I can't get the first tab to open when the page loads. Please help me find what I am doing wrong. I'm a beginner with javascript.
Here's the code I'm using (it's the code from w3school that's supposed to have the first tab open on page load.). I have the script in an external file and have the script tag in the header section.
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
Here's the site http://pt6-dev.info/donate-now/
Any help is appreciated!!
Peggy
It's not working because you have placed your JS in the head, so this statement:
document.getElementById("defaultOpen").click();
is executing before the DOM has been created.
The simplest solution would be to move your JS file at the end of the <body> tag.
Replace your Tab.js with this code :)
You need call document.getElementById("defaultOpen").click(); when view will get prepare.
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
window.onload = function(e){
document.getElementById("defaultOpen").click();
}
$(document).ready(function() { //If you are using jquery then use this other wise you can use normal window.onload
document.getElementById("defaultOpen").click();
});
You can add the click function inside a function and call it.
that is instead of
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
You can add it within a function to load the window
window.onload = function () {
firstTab();
};
function firstTab() {
document.getElementById("defaultOpen").click();
}
Add the following line of code in the end of your JavaScript
window.onload=function(){
openCity(event, 'London');
};