Tabs(like EXCEL) in HTMl


#1

How to get tabs (like excel sheets) in HTML please refer image.


#2

Did you tried to inspect element ? :slight_smile:


#3

how did you convert xlsx to html?

you could make a simple navigation menu and place it at the bottom? Then use the anchor element (<a></a>) to link each "tab" to a different page.


#4

Hi ckbhawsar,
You will need some JS, here's a simple example that may help you to have an idea.

Here's some random look of the tabs


And here is the code

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css" type="text/css">
  <script src="main.js"></script>
</head>
<body>
  <ul>
    <li><a id="btn1" class="active" href="#" onclick="showPage1()">Page 1</a></li>
    <li><a id="btn2" href="#" onclick="showPage2()">Page 2</a></li>
    <li><a id="btn3" href="#" onclick="showPage3()">Page 3</a></li>
  </ul>
  <div id="page1" class="container first">
    <h1>I'm Page1</h1>
  </div>
  <div id="page2" class="container">
    <h1>I'm Page2</h1>
  </div>
  <div id="page3" class="container">
    <h1>I'm Page3</h1>
  </div>
</body>
</html>

JavaScript (where the magic happens, it's very very simple, but it works)

function showPage1() {
	"use strict";
    document.getElementById('page1').style.zIndex = '1';
	document.getElementById('page2').style.zIndex = '0';
	document.getElementById('page3').style.zIndex = '0';
	
	document.getElementById('btn1').className = "active";
	document.getElementById('btn2').classList.remove("active");
	document.getElementById('btn3').classList.remove("active");
}

function showPage2() {
	"use strict";
    document.getElementById('page1').style.zIndex = '0';
	document.getElementById('page2').style.zIndex = '1';
	document.getElementById('page3').style.zIndex = '0';
	
	document.getElementById('btn1').classList.remove("active");
	document.getElementById('btn2').className = "active";
	document.getElementById('btn3').classList.remove("active");
}

function showPage3() {
	"use strict";
    document.getElementById('page1').style.zIndex = '0';
	document.getElementById('page2').style.zIndex = '0';
	document.getElementById('page3').style.zIndex = '1';
	
	document.getElementById('btn1').classList.remove("active");
	document.getElementById('btn2').classList.remove("active");
	document.getElementById('btn3').className = "active";
}

CSS (some random, not fancy look)

* {
	margin: 0;
	padding: 0;
}
body {
	height: 100%;
}

.container {
	width: 100%;
	height: 93%;
	position: absolute;
	background-color: #eee;
	box-shadow: 1px 1px 5px #bbb;
	z-index: 0;
}
.first{
	z-index: 1;
}

ul{
	position: absolute;
	bottom: 0;
}
li{
	position: relative;
	list-style: none;
	float: left;
	padding: 24px 0px;
}
a{
	padding: 24px 50px;
	font-family: sans-serif;
	text-decoration: none;
	color: #222;
	background-color: #ddd;
	border: solid 1px #bbb;
}
.active {
	background-color: #eee;
}

Hope this helps.


#5

yes tried that but didnt find


#6

Save xlsx as webpage it will save as html


#7

Yes it helped me thanks sir,
can it be done without Javascript


#8

yep, but you would need to create a separate page for each tab and then use html to link each page using anchor element (<a></a>)


#9

I'm a woman, actually :wink:

And this is how it must look like without JavaScript.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
	<ul>
		<li><a href="page1.html" target="page">Page 1</a></li>
		<li><a href="page2.html" target="page">Page 2</a></li>
		<li><a href="page3.html" target="page">Page 3</a></li>
	</ul>
	<iframe name="page" src="page1.html" frameborder="0"></iframe>
</body>
</html>

As stetim94 said. Or you can take away the iframe and just change from page to page, and add the ul tabs in every page.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.