<?xml version="1.0" encoding="UTF-8"?>
<!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>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<link rel="stylesheet" type="text/css" href="jquery.tk.tabbed.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="jquery.tk.tabbed.js" type="text/javascript"></script>
<title>tabbed demo</title>
</head>
<body>
<div class="tk-tabbed" style="width:300px;">
<ul>
<li><a href="#tab11">Tab 1 </a></li>
<li><a href="#tab12">Tab 2 </a></li>
<li><a href="#tab13">Tab 3 </a></li>
</ul>
<div id="tab11">
TAB 1 content
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
lqkdjqmlkdjqmdlqj d<br />
</div>
<div id="tab12">TAB 2 content</div>
<div id="tab13">TAB 3 content</div>
</div>
<div class="tk-tabbed" style="width:300px;">
<ul>
<li><a href="#tab21">Tab 1 </a></li>
<li><a href="#tab22">Tab 2 </a></li>
<li><a href="#tab23">Tab 3 </a></li>
</ul>
<div class="tk-tabbed-pannels">
<div id="tab21">TAB 1 content</div>
<div id="tab22">TAB 2 content</div>
<div id="tab23">TAB 3 content</div>
</div>
</div>
<script type="text/javascript">
$('.tk-tabbed').tabbed();
</script>
</body>
</html>
|
Download
