we have 2 tabs(which are made with html items in button form).
i want to display different list report(eg query 1 and query 2) on click of 2 tabs. tab1 and tab 2 respectively.
can anyone help out with the javascript code embed in the html item.
you can use some html item to control it, may be this can help you:
1. <DIV ID="Tab1" STYLE="display:block">
report1(the report you want to diaplay)
</DIV>
2. <DIV ID="Tab1" STYLE="display:none">
report2(the report you want to hide)
</DIV>
3. <a href='#' id="btn1" style="color:#red;cursor:inherit" type="button" value="report1" onClick="changeColor('btn1'); SwitchChart(this);">
report1</a>
4. <a href='#' id="btn2" style="color:#blue;cursor:inherit" type="button" value="report2" onClick="changeColor('btn2'); SwitchChart(this);">
report2</a>
5. <script language="JavaScript" type="text/JavaScript">
function SwitchChart(obj){
if(obj.value=="report1"){
document.all['Tab1'].style.display='block';
document.all['Tab2'].style.display='none';
}
if(obj.value=="report2"){
document.all['Tab2'].style.display='block';
document.all['Tab1'].style.display='none';
}
function changeColor(id){
if(id=="btn1"){
document.getElementById(id)["style"]["color"]="red";
document.getElementById("btn2")["style"]["color"]="blue";
}
if(id=="btn2"){
document.getElementById(id)["style"]["color"]="red";
document.getElementById("btn1")["style"]["color"]="blue";
}
}
}