Прехвърляне в друга таблица без презареждане
Трябват Ви 3 файла, това нещо е нещо като това в дясната колона на сайта http://mobilebulgaria.com - където има Борса , Форум , Търгове.

1 файл - tabs.js

// JavaScript Document
function changeTab(iTab, iDiv, aTab, aDiv) {

iTab=document.getElementById(iTab);
iDiv=document.getElementById(iDiv);
iTab.className='inactive';
iDiv.className='hidden';

aTab=document.getElementById(aTab);
aDiv=document.getElementById(aDiv);
aTab.className='current';
aDiv.className='';
}
function changeTabs(aTab, aDiv, iTab, iDiv, i2Tab, i2Div) {

iTab=document.getElementById(iTab);
iDiv=document.getElementById(iDiv);
iTab.className='';
iDiv.className='hidden';

i2Tab=document.getElementById(i2Tab);
i2Div=document.getElementById(i2Div);
i2Tab.className='';
i2Div.className='hidden';

aTab=document.getElementById(aTab);
aDiv=document.getElementById(aDiv);
aTab.className='current';
aDiv.className='';
}


2 файл - index.html

<html>
<head></head>
<body>
<link href="test.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="tabs.js"></script>
<div id="right">
<div class="class">
<ul>
<li class="ThreeCols"><a href="#" onClick="javascript: changeTabs('tab_1', '1','tab_2', '2','tab_3','3'); return false;" id="tab_1" class="current"><p>1</p></a></li>
<li class="ThreeCols"><a href="#" onClick="javascript: changeTabs('tab_2','2','tab_1', '1','tab_3','3'); return false;" id="tab_2"><p>2</p></a></li>
<li class="ThreeCols"><a href="#" onClick="javascript: changeTabs('tab_3','3','tab_2','2','tab_1', '1'); return false;" id="tab_3"><p>3</p></a></li>
</ul>
<div style="clear:both;"></div>
<div id="2" class="content hidden">
<div class="inblock"><a href="" ><strong>1. Еди какво си ...</strong></a>
</div>
</div>
<div id="1">
<div class="inblock"><a href="" ><strong>1. Еди какво си 2. ...</strong></a>
</div>
</div>
<div id="3" class="content hidden">
<div class="inblock"><a href="" ><strong>1. Еди какво си 3. ...</strong></a>
</div>
</div>
</div>
</div>
</body>
</html>


3 файл - test.css

/* CSS Document */

#right{float: right; width: 300px; overflow:hidden;}
#rightAds{ padding: 2px 0 4px 0;}
#right .block{font-size:11px; background-color: #FFF; margin-bottom: 0px; border: 2px solid #E5E5E5;}
#right .block ul{ margin: 0; padding: 0; background: #E5E5E5; height: 20px; min-height:26px;}
#right .block li{ float: left; height: 26px; list-style: none; padding: 0; margin: 0;}
#right .block li a.current p{ background: #FFF; font-weight: bold; color: #EA5A00;}
#right .block li a:hover{ text-decoration: none;}
#right .block li a.current, #right .block li a.current:visited{ color: #EA5A00;}
#right .block li a, #right .block li a:visited{ color: #000;}
#right .block li a p{ padding: 7px 0 6px 0; font-size: 12px; text-align: center; border-right: 2px solid #E5E5E5; background: none;}
#right .block li p strong{ font-size: 12px; color: red;}
#right .block li.TwoCols{ width: 148px;}
#right .block li.ThreeCols{ width: 98px;}
#right .block .inblock{ padding: 5px; line-height: 18px;}
#right .block .inblock a{ color: #000; border-bottom: 1px dashed #A9A9A9; padding: 3px; display: block;}
#right .block .inblock a.last{ border-bottom: none;}
#right .block .inblock a:visited { color: #EA5A00;}
#right .block .inblock ul{ background: none;}
#right .block .inblock li{ background: none; display: block; float: none;}
#right .block .inline a{ display: inline; border-bottom: none;}
#right .block .inline table.BB{ width: 280px;}
#right .block .inline table.BB td{ border-bottom: 1px dashed #A9A9A9; padding: 2px;}
#right .block .PHidden p{ display: none;}
#right .block .PHidden li, #right .block .PHidden ul{ clear: both; display: block; float: none; height: auto;}
#right .block h3 { background: #898989; color: #FFF; font-weight: bold; font-size: 12px; padding: 3px 4px 3px 4px; margin: 0; border-bottom: 1px solid #FFF}
#right .block h3 a { background:no-repeat url(../img/right_arrow.jpg); padding-left: 15px; color: #FFF; text-decoration: none;}
#right .block h4 { background: #898989; color: #FFF; font-weight: bold; font-size: 12px; padding: 3px 4px 3px 4px; margin: 0; border-bottom: 1px solid #FFF}
#right .block h4 a { padding-left: 15px; color: #FFF; text-decoration: none;}
#right .block p{padding: 8px 0px 8px 8px; background: #F2F2F2; font-size: 11px; color:#0071A2; margin-bottom:0px;}
#right .block p.stil1{padding: 8px 0px 8px 8px; font-size: 11px; color:#0071A2; background:none; font-weight:bolder;}
#right .block p.stil2{padding: 4px; font-size: 11px; color: #EA5A00; background:none; }
#right .block a{color:#0071A2;}
#right .block p strong{ color: #000; font-weight: normal;}
div.hidden{display: none;}


така със тези 3 файла се получава това можете да го доразработвате като го украсите от .css, сложите различни надписи на 1,2,3 и така.

ДЕМО



/ Трябва да сте регистриран за да напишете коментар /