I need to make each of these tabs an html page, that when you press on the tab i
ID: 3604565 • Letter: I
Question
I need to make each of these tabs an html page, that when you press on the tab it will redirect you to that page. using <a href="</p> <p><!DOCTYPE html></p> <p><html lang="en">
<head>
<title>Tab open</title>
</head>
<body>
<style>
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
/* Change background color of buttons on hover */
.tablink:hover {
background-color: #777;
}
/* Set default styles for tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
</style>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>home</p>
</div>
<div id="About Us" class="tabcontent">
<h3>About Us</h3>
<p>about us</p>
</div>
<div id="Customer Support" class="tabcontent">
<h3>Customer Support</h3>
<p>Any questions or technical support, Please call us </p>
</div>
<div id="Shop" class="tabcontent">
<h3>Shop</h3>
<p>We have different products.</p>
</div>
<div id="Cart" class="tabcontent">
<h3>Cart</h3>
<p>You have added these items to your shopping cart.</p>
</div>
<div id="Contact Us" class="tabcontent">
<h3>Contact Us</h3>
<p><center> here </center></p>
</div>
<div id="Member Login" class="tabcontent">
<h3>Member Login</h3>
<p>You can login here.</p>
</div>
<div id="Register" class="tabcontent">
<h3>Register</h3>
<p>You can register here.</p>
</div>
<button class="tablink" id="defaultOpen">Home</button>
<button class="tablink">About Us</button>
<button class="tablink">Customer Support</button>
<button class="tablink">Shop</button>
<button class="tablink">Cart</button>
<button class="tablink">Contact Us</button>
<button class="tablink">Member Login</button>
<button class="tablink">Register</button>
<script>
function openTab(id, e,color){
//we need to hide all tabs before showing one tab
var tabs = document.getElementsByClassName("tabcontent");
for(var i = 0; i < tabs.length; i++){
tabs[i].style.display = "none";
}
//display clicked tab
document.getElementById(id).style.display = "block";
//set background color to given color
document.getElementById(id).style.backgroundColor = color;
}
</script>
</body>
</html>
Explanation / Answer
Answer:- Now,It work perfectly and open google.com as a link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab open</title>
</head>
<body>
<style>
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
/* Change background color of buttons on hover */
.tablink:hover {
background-color: #777;
}
/* Set default styles for tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
</style>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>home</p>
</div>
<div id="About Us" class="tabcontent">
<h3>About Us</h3>
<p>about us</p>
</div>
<div id="Customer Support" class="tabcontent">
<h3><a href="www.google.com">Customer Support</a></h3>
<p>Any questions or technical support, Please call us </p>
</div>
<div id="Shop" class="tabcontent">
<h3>Shop</h3>
<p>We have different products.</p>
</div>
<div id="Cart" class="tabcontent">
<h3>Cart</h3>
<p>You have added these items to your shopping cart.</p>
</div>
<div id="Contact Us" class="tabcontent">
<h3>Contact Us</h3>
<p><center> here </center></p>
</div>
<div id="Member Login" class="tabcontent">
<h3>Member Login</h3>
<p>You can login here.</p>
</div>
<div id="Register" class="tabcontent">
<h3>Register</h3>
<p>You can register here.</p>
</div>
<a href="http://www.google.com"><button class="tablink" id="defaultOpen">Home</button>
<button class="tablink">About Us</button>
<button class="tablink">Customer Support</button>
<button class="tablink">Shop</button>
<button class="tablink">Cart</button>
<button class="tablink">Contact Us</button>
<button class="tablink">Member Login</button>
<button class="tablink">Register</button></a>
<script>
function openTab(id, e,color){
//we need to hide all tabs before showing one tab
var tabs = document.getElementsByClassName("tabcontent");
for(var i = 0; i < tabs.length; i++){
tabs[i].style.display = "none";
}
//display clicked tab
document.getElementById(id).style.display = "block";
//set background color to given color
document.getElementById(id).style.backgroundColor = color;
}
</script>
</body>
</html>