How do I make multilevel tabbed panes in HTML/CSS/JavaScript?
Question
I want to make multilevel tabbed panes for my PHP frontend.
I want to achieve something like this:
_______|TAB1||Tab2||Tab3|________________________________
___________|SUB TAB1||Sub Tab2|_____________________
|Content of Sub Tab 1 of Tab1|
|Content of Sub Tab 1 of Tab1|
|Content of Sub Tab 1 of Tab1|
|Content of Sub Tab 1 of Tab1|
Similarly, when I click on Sub tab2 of Tab1 it should show its content. Now when I click Tab 2, it should by default display contents of its subtab11 & when I click SubTab2 of Tab2, it should display its content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Tab-View Sample</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="tab-view.css" />
</head>
<body>
<?php $id = isset($_GET['id']) ? $_GET['id'] : 1;
$ida = isset($_GET['ida']) ? $_GET['ida'] : 11;
?>
<div class="TabView" id="TabView">
<!-- ***** Tabs ************************************************************ -->
<div class="Tabs" style="width: 452px;">
<a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
<a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
<a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>
</div>
<!-- ***** Pages *********************************************************** -->
<div class="Pages">
<div class="Page" style="display: <?=($id == 1 && $ida == 11) ? 'block' : 'none';?>">
<div class="Pad">
<div class="Tabs" style="width: 452px;">
<a <?=($ida == 11) ? 'class="Current"' : 'href="sample.php?id=1&ida=11"';?>>Tab 1</a>
<a <?=($ida == 12) ? 'class="Current"' : 'href="sample.php?id=1&ida=12"';?>>Tab 2</a>
</div>
<div class="Pages">
<div class="Page" style="display: <?=($ida == 11) ? 'block' : 'none';?>">
<div class="Pad">
Hello World Tab 11!!!
</div>
</div>
</div>
<div class="Pages">
<div class="Page" style="display: <?=($ida == 12) ? 'block' : 'none';?>">
<div class="Pad">
Hello World Tab 12!!!
</div>
</div>
</div>
</div>
</div>
<div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>">
<div class="Pad">
<? odbc_result_all($cur,"border=1"); ?>
</div>
</div>
<div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>">
<div class="Pad">
<?
foreach($arr as $val)
{
echo($val.'<br>');
}
?>
</div>
</div>
</div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
<div class="TabView1" id="TabView1">
<!-- ***** Tabs ************************************************************ -->
<div class="Tabs" style="width: 452px;">
<a <?=($id == 4) ? 'class="Current"' : 'href="sample.php?id=4"';?>>Tab 4</a>
<a <?=($id == 5) ? 'class="Current"' : 'href="sample.php?id=5"';?>>Tab 5</a>
<a <?=($id == 6) ? 'class="Current"' : 'href="sample.php?id=6"';?>>Tab 6</a>
</div>
<!-- ***** Pages *********************************************************** -->
<div class="Pages">
<div class="Page" style="display: <?=($id == 4) ? 'block' : 'none';?>">
<div class="Pad">
Hello India!!!
</div>
</div>
<div class="Page" style="display: <?=($id == 5) ? 'block' : 'none';?>">
<div class="Pad">
<? odbc_result_all($cur,"border=1"); ?>
</div>
</div>
<div class="Page" style="display: <?=($id == 6) ? 'block' : 'none';?>">
<div class="Pad">
<?
foreach($arr as $val)
{
echo($val.'<br>');
}
?>
</div>
</div>
</div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
<script type="text/javascript" src="tab-view.js"></script>
<script type="text/javascript">
tabview_initialize('TabView');
tabview_initialize('TabView1');
</script>
</body>
</html>
I want to achieve multilevel tabs through this code. It is displaying correctly, but when I click on one of the subtabs, it gives an error:
"Object not found"
2 answers
solution1
1 2011-07-12 07:39:49
As a simple example, you could use <a href="javascript:;" onclick="show(1)">, where 1 is the tab number, for each tab.
Then make special named tags for the sections:
<div id="div1">section 1</div>
<div id="div2">section 2</div>
...
and a script to change visibility:
function show(number) {
document.getElementById("div2").style.display='none'
document.getElementById("div2").style.display='none'
...
document.getElementById("div"+number).style.display='block'
}
You should be able to do the same for the sub-section tabs, since a sub-element of a hidden element is hidden.
solution2
0 ACCPTED 2011-10-13 19:21:02
http://flowplayer.org/tools/tabs/index.html
Finally I used this library file to get my job done.
Thanks all for your views, replies & suggestions. :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.