Parent page
<div class="row">
<div class="col-md-3">
link 1
link 2
link 3
.
.
.
</div>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
When link is clicked child page will be loaded in ng-view>
<table class='table table-bordered'>
<tr>
<td>
this is my screen view
when user clicks a link in parent page
specific contentd loaded here
</td>
</tr>
</table>
<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
<span class="glyphicon glyphicon-print"></span> Print
</button>
<div id ="printsection">
<table style="width:80mm;">
<tr style="text-align: center;">
<td>this is my print view contents
send these contents
to print to printer
</td>
</tr>
</table>
</div>
Above child page have 2 sections. screen view and printsection.
I want when user clicks on print button, printsection contents send to printer.
I have define these CSS rules for media print.
print.css
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility: hidden;
}
#printsection * {
visibility: visible;
}
#printsection {
position: absolute;
left: 0;
top: 0;
}
Problem is on click of print button, its hiding all the contents, even the print section.
What i am doing wrong?
Please note i am using POS printer 80mm width, dats i made width = 80mm in printsection.
You can use a simple function to replace the page and print as well.
<button onclick="printElement('my-section')">Print</button>
function printElement(id) {
var printHtml = document.getElementById(id).outerHTML;
var currentPage = document.body.innerHTML;
var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
//change the body
document.body.innerHTML = elementPage;
//print
window.print();
//go back to the original
document.body.innerHTML = currentPage;
}
Are you setting changing the visibility to visible for the "printsection" when you click the print button?
I would use the following css rules for visibility.
display:none, display:block.
You didn't make the printSection itself visible. Same with all it's parents. So you'll have to do something like this:
#printSection{
visibility: visible;
}
And all of it's parents since you hid all of them with body *{ ... }
I'm so sure that must use CSS media rules - #media print, on this case. Take a look:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
#media all {
/* media-specific rules, suitable for all devices. */
}
#media screen {
/* acreen media-specific rules */
}
#media only print {
/* Intended for paged material and for documents
viewed on screen in print preview mode .*/
main {
display: none;
}
}
</style>
</head>
<body>
<main>
<button onclick="window.print()">Print</button>
<h1>hello</h1>
<p>Some paragraph</p>
</main>
<div id="print-section">
<h2>subtitle</h2>
<table border="1" width="50%">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So when user press CTRL + P or clicking on button invoking window.print(), everything outside of main tag will be printed. It is the best approach.
From the docs:
Syntax:
#media <media-query> {
/* media-specific rules */
}
Related
I am trying to set the background color of a cell in the html page from a simple javascript. Below is my html and javascript:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<meta http-equiv="refresh" content="30">
<script src ="Json_Development_Test.js">
</script>
<!-- HTML -->
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>Test</p>
</span>
</div>
</td>
<td>
<div>
<span id="header2">
<p>Test2</p>
</span>
</div>
</td>
<td>
<div>
<p>Test3</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Javascript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
document.getElementById('headerID1').bgColor='#003F87'
Expected result:
I need to change the background color of the span id "headerID1" and following other span id as well.
Actual result:
The color is not getting changed and instead I am getting the following errors:
HTML1503: Unexpected start tag.
testDesign.html (26,1)
SCRIPT5007: Unable to get property 'style' of undefined or null reference
Json_Development_Test.js (4,1)
HTML1512: Unmatched end tag.
testDesign.html (32,1)
HTML1506: Unexpected token.
testDesign.html (43,2)
2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption>", "td>", or "th>" elements.
Can anyone help me to resolve this error?
Besides some errors related to invalid HTML, as mentioned by others, your background color won't change because you put <p> inside <span> which doesn't make any sence since <p> is a paragraph and <span> is a generic inline container for phrasing content. It will work though if you put <span> inside <p>:
<p id="header2">
<span>...</span>
</p>
But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Check the following example:
document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>BG doesn't work</p>
</span>
</div>
</td>
<td>
<div>
<p id="header2">
<span>BG works because <span> is inside <p></span>
</p>
</div>
</td>
<td id="header3">
<div>
<p>BG for entire cell</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
UPD: Probably you are getting SCRIPT5007: Unable to get property 'style' of undefined or null reference because your Json_Development_Test.js script starts executing when the rest document is not rendered yet. You can try to:
Put <script src ="Json_Development_Test.js"> to the bottom of the html
Put this line document.getElementById('headerID1').style.backgroundColor = 'blue'; inside the window.addEventListener('load', ...) callback:
window.addEventListener('load', function() {
console.log('All assets are loaded');
document.getElementById('headerID1').style.backgroundColor = 'blue';
});
Problem is with this line of code
document.getElementById('headerID1').style.background = 'blue'
use
document.getElementById('headerID1').bgColor='blue'
instead.
Also, HTML structure is wrong too.
Your HTML is invalid. When writing HTML you might want to use an HTML validator.
A few problems with your code:
the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
Delete this line <div id ="test">
The property you want in your JS is backgroundColor, so you would have:
document.getElementById('headerID1').style.backgroundColor = 'blue';
I'm using a few things from bootstrap in my template, like glyphicon's and a navbar. Which is on my "forum.php". Now when I want to delete a topic, I want a javascript popup to show up which is working just fine. But through that popup I can see bootstraps navbar and glyphicon. How do I fix this?
forum.php
<table class="overview">
<tr class="row1">
<td class="col1">
<button>
<span class="glyphicon glyphicon-eye-open">
</span>
</button>
</td>
</tr>
</table>
<button onclick="showDiv()">Delete category</button>
css.css
#popup_container {
width:100%;
height:100%;
opacity:.99;
top:0;
left:0;
display: none;
position:fixed;
background-color:#313131;
overflow:auto
}
#prompt-delete {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
}
popup.php
<div id="popup_container">
<div id="prompt-delete">
<h2> my popup</h2>
<button onclick="closeDiv()">Close</button>
</div>
</div>
Javascript.js
function showDiv() {
document.getElementById('popup_container').style.display = "block";
}
function closeDiv() {
document.getElementById("popup_container").style.display = "none";
}
When popup is showing, through that div, on the background I see the glypicon of bootstrap without being faded into the background. It shows without opacity.
The rest of the page is faded with the opacity defined in the css.
Change The z-index of your pop-up to 1.
I want to print content in a div using Javascript and CSS. My main div is with id 'preview'. Content in a div taken from database using PHP and MySQL. In my print page don't get style of the div 'preview'. I want to open print screen in new window. Any body give any suggestion for these issue?
My page and print are
My code is given below.
<?php
error_reporting(0);
$host='localhost'; // Host Name.
$db_user= 'root'; //User Name
$db_password= '';
$db= 'excel'; // Dat
$conn=#mysql_connect($host,$db_user,$db_password) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
$sql = "select * from first order by id";
$rsd = #mysql_query($sql);
?>
<script type="text/javascript">
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
<style type="text/css" media="print">
#media print{ #preview{ height:100%;overflow:visible;} }
</style>
<style>
#my-list{
padding: 10px;
padding-left:15px;
width:auto;
margin:auto;
}
#my-list > li {
display: inline-block;
zoom:1;
*display:inline;
}
#my-list > li > a{
color: #666666;
text-decoration: none;
padding: 3px 8px;
}
</style>
<input type="button" value="Print" onClick="javascript:printDiv('preview')" />
<div id="preview" style="width:1000px; margin:auto;">
<ul id="my-list" >
<?php
$si=1;
while($fet=mysql_fetch_array($rsd))
{
?>
<li>
<div class="droppable2" style="border-color:#3300FF; border:solid #999999;
height:180px;width:180px;position:relative; " >
<div style="float:left;position:absolute; bottom:30px;" class="left">
<img src="img.png" >
</div>
<div style="float:right;">
<p style="color: #003399; font-size: 10px;
padding-right:5px; font-weight:800; ">www.selafone.net</p>
<table style="font-size:10px;" >
<tr> <td >USERNAME: </td> <td> <?php echo $fet['name']; ?> </td></tr>
<tr> <td>PASSWORD:</td> <td> <?php echo $fet['email']; ?></td></tr></table>
</div>
<div style="position:absolute;background-color:#FF0000;
padding-bottom:0px; bottom: 0; height:36px; ">
<div style="color:#FFFFFF; padding-left:30px; vertical-align:middle;
font-weight:100;padding-top:10px; font-size: 8px;">
<strong> International prepaid Calling Card</strong></div></div>
</div>
</li>
<?php
$si=$si+1;
}
?>
</ul>
</div>
Source: Background color not showing in print preview
this is copy/paste reply of #purgatory101 from the top url
"
The Chrome css property "-webkit-print-color-adjust: exact;" works appropriately.
However, making sure you have the correct css for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print css from your screen css. This is done via the #media print and #media screen.
Often times just setting up some extra #media print css is not enough because you still have all your other css included when printing as well. In these cases you just need to be aware of css specificity as the print rules don't automatically win against non-print css rules.
In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other css with higher specificity.
While I DO NOT endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
#media print {
.your_id {
color: white !important;
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
"
If you want to open new window with printing page you need to create this window. Something like this:
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML; // your div
var newWindow=window.open('','','width=600,height=600'); // new window
newWindow.document.write(divElements); // div → window
newWindow.document.close();
newWindow.focus();
newWindow.print(); // printing
newWindow.close();
}
You can put all your CSS rules like this:
#media screen {
// css rules for screen
}
#media print {
// css rules for print
}
I'm new to Javascript and I'm working on a project. Thanks to help from a online help website, I'm able to show/hide my table successfully.
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL.
I want to use this anchor element to open up the specific table from an external link from another web page. (e.g. at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page)
Thank you very much!
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain.
JQuery's .load function is very versatile. To load the first table from testing.html, we can do:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table:
$('#tableContainer').load('testing.html table:eq(1)');
and so on.
demo
Note that the 3 tables in the demo are loaded from here
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed:
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.
Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.
Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.
Demo: http://jsfiddle.net/DEv8z/2/
Javascript
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
CSS
td {
vertical-align: top;
}
#table1, #table2, #table3, #table4 {
display: none;
}
HTML
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="#" onclick='show(1);'>Table 1</a>
<br />
<a href="#" onclick='show(2);'>Table 2</a>
<br />
<a href="#" onclick='show(3);'>Table 3</a>
<br />
<a href="#" onclick='show(4);'>Table 4</a>
</td>
<td>
</td>
<td>
<div id="table1"> Content of 1 </div>
<div id="table2"> Content of 2 </div>
<div id="table3"> Content of 3 </div>
<div id="table4"> Content of 4 </div>
</td>
</tr>
</table>
UPDATE
Using a file for each table would look like this:
table1.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 2
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 1
</td>
</tr>
</table>
-----------------------------------------------------
table2.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 1
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 2
</td>
</tr>
</table>
And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.
Try this FIDDLE
HTML :
<span id="sp1">Table 1</span>
<span id="sp2">Table 2</span>
<span id="sp3">Table 3</span>
<span id="sp4">Table 4</span>
<table border="1" id="t2">
<tr><td>22</td></tr>
<tr><td>22</td></tr>
</table>
<table border="1" id="t3">
<tr><td>33</td></tr>
<tr><td>33</td></tr>
</table>
JS :
document.getElementById('sp1').addEventListener("click",function(){
showTable('t1');
});
document.getElementById('sp2').addEventListener("click",function(){
showTable('t2');
});
function showTable(table){
var tables =['t1','t2','t3','t4'];
for(var i=0;i<4;i++){
document.getElementById(tables[i]).style.display = "none";
}
document.getElementById(table).style.display = "block";
}
P.S : Since I see no effort, the styling part i'm leaving it to you.
You will need JavaScript to do this. I have a JSFiddle with the code below. JSFiddle is interactive and lets you play with the solution. I'm relying on a popular JavaScript framework named jQuery to make this a bit easier. You will need to load the jQuery framework into your site to get this to work. Here is the JSFiddle link: http://jsfiddle.net/sU9Pf/
Here is the code that you can run interactively in the above JSFiddle link. First some example HTML:
<table id="one" border="1"><caption>Table One</caption></table>
<table id="two" border="1"><caption>Table Two</caption></table>
<table id="three" border="1"><caption>Table Three</caption></table>
<table id="four" border="1"><caption>Table Four</caption></table>
<div id="showTableHereWhenTableIsClicked">
<p>Click A Table To Show It Here</p>
</div>
Next is the JavaScript that makes it do what you want:
$(function() {
$('table').on('click', function() {
var tableClone = $.clone(this);
var stage = $('#showTableHereWhenTableIsClicked');
stage.prop('innerHTML', '');
$(tableClone).appendTo(stage);
});
});
The easiest way it can be done with just HTML would require you to build 4 different pages and just link between them. If you want it to 'seem' like it is all on one page, you can use HTML iframes to make it look like your many pages are one page by loading them into the current page.
It is possible to do this in one page with just HTML and CSS, but would require really tricky CSS and the :selected selector.
The easiest way to do it in 'one page' is to use Javascript. jQuery (a javascript library) would make it even easier.
You need to know javascript or jquery to do this.
Here is an example with jquery considering your tables have ids
table_1
table_2
table_3
table_4
And your right side container has an id right-container
So on click event you can do like
$("[id^=table_]").click(function(){
$("#right-container").html($(this).parent().html());
});
Please try it...
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
<ul id="tablist">
<li>Dynamic Drive</li>
<li>What's New</li>
<li>What's Hot</li>
<li>Search</li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="sc2" class="tabcontent">
Visit our What's New section to see recently added scripts to our archive.
</div>
<div id="sc3" class="tabcontent">
Visit our Hot section for a list of DD scripts that are popular to the visitors.
</div>
<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</DIV>
Another working answer.
Using HTML, CSS, JQUERY.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#t1").click(function()
{
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
});
$("#t2").click(function()
{
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
});
$("#t3").click(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
});
});
</script>
<style>
table
{
width:100px;
}
#tab1
{
background:red;
margin: 12px;
}
#tab2
{
background:green;
margin: 12px;
}
#tab3
{
background:blue;
margin: 12px;
}
#panel
{
width:125px;
height:80px;
border:1px solid black;
float:right;
}
#t1, #t2, #t3
{
cursor: pointer;
width:50px;
height:30px;
border:1px solid black;
}
</style>
</head>
<div>
<div id="t1">TAB1</div>
<div id="t2">TAB2</div>
<div id="t3">TAB3</div>
<div id="panel">
<table border="1" id="tab1">
<tr><td>TAB1</td></tr>
<tr><td>RED</td></tr>
</table>
<table border="1" id="tab2">
<tr><td>TAB2</td></tr>
<tr><td>GREEN</td></tr>
</table>
<table border="1" id="tab3">
<tr><td>TAB3</td></tr>
<tr><td>BLUE</td></tr>
</table>
</div>
</div>
This is easy to do, but will require the use of JavaScript.
It can not be done using html alone.
html without script is static.
When you add script to html you get dhtml (dynamic HTML) and you can make the rendered document change base on client interaction with the document.
Are you familiar with jsfiddle? It is a perfect tool to demonstrate this.
You will create 4 divs (or tables). You will give each an id and you will style each to be "display: none". You will create your table of contents as a list and using one of many methods, register a click event handler to the list.
The click event handler will set the display attribute of the visible div/table to none, then it will set the display attribute of the desired div/table to something other than none such as "block" or "table" and will finally store a reference to the visible div/table where it can be retrieved the next time the event handler is invoked.