Onclick change value of two places at time using simple javascript and html. Please Use below code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Onclick changed top and bottom value using html and simple javascript </TITLE>
<script language="javascript">
function toggle(id) {
for(i=1;i<4;i++)
{
var obj = 'tab'+i;
var obj1 = 'tb'+i;
if(i==id)
{
document.getElementById(obj).style.display = 'block';
document.getElementById(obj1).className="selected" ;
}
else
{
document.getElementById(obj).style.display = 'none';
document.getElementById(obj1).className = '';
}
}
}
</script>
</HEAD>
<BODY>
<div style="display:block;" class="tab-heading" id="tab_head">Display tab top value 1<br></div>
<div class="tabcontainer">
<div class="shadetabs">
<div id="tb1" class="selected"><br><a style="cursor:pointer;color:#0000FF;" onClick="changeHeading(1); toggle('1'); return false;" >Click tab1</a> and
<div id="tb2" class=" " ><a style="cursor:pointer;color:#0000FF;" onClick="changeHeading(2); toggle('2'); return false;">Click tab2</a><br></div></div>
</div>
<script language="javascript">
function changeHeading(tab)
{
if(tab==1)
document.getElementById('tab_head').innerHTML = 'Display tab top value 1';
if(tab==2)
document.getElementById('tab_head').innerHTML = 'Display tab top value 2';
}
</script>
<!-- section display all hotels start here -->
<div style="display:block;" id="tab1">
<br> Display tab bottom value1
</div>
<div style="display:none;" id="tab2"><br> Display tab bottom value 2 </div>
</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Onclick changed top and bottom value using html and simple javascript </TITLE>
<script language="javascript">
function toggle(id) {
for(i=1;i<4;i++)
{
var obj = 'tab'+i;
var obj1 = 'tb'+i;
if(i==id)
{
document.getElementById(obj).style.display = 'block';
document.getElementById(obj1).className="selected" ;
}
else
{
document.getElementById(obj).style.display = 'none';
document.getElementById(obj1).className = '';
}
}
}
</script>
</HEAD>
<BODY>
<div style="display:block;" class="tab-heading" id="tab_head">Display tab top value 1<br></div>
<div class="tabcontainer">
<div class="shadetabs">
<div id="tb1" class="selected"><br><a style="cursor:pointer;color:#0000FF;" onClick="changeHeading(1); toggle('1'); return false;" >Click tab1</a> and
<div id="tb2" class=" " ><a style="cursor:pointer;color:#0000FF;" onClick="changeHeading(2); toggle('2'); return false;">Click tab2</a><br></div></div>
</div>
<script language="javascript">
function changeHeading(tab)
{
if(tab==1)
document.getElementById('tab_head').innerHTML = 'Display tab top value 1';
if(tab==2)
document.getElementById('tab_head').innerHTML = 'Display tab top value 2';
}
</script>
<!-- section display all hotels start here -->
<div style="display:block;" id="tab1">
<br> Display tab bottom value1
</div>
<div style="display:none;" id="tab2"><br> Display tab bottom value 2 </div>
</div>
</BODY>
</HTML>
No comments:
Post a Comment