مقاله: آموزش تب بندی بخش فعالیت های درحال انجام

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
			$(document).ready(function(){
				$('ul.wgo-tabs').each(function(){
					var $active, $content, $links = $(this).find('a');
					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
					$active.addClass('active');
					$content = $($active[0].hash);
					$links.not($active).each(function () {
						$(this.hash).hide();
					});
					$(this).on('click', 'a', function(e){
						$active.removeClass('active');
						$content.hide();
						$active = $(this);
						$content = $(this.hash);
						$active.addClass('active');
						$content.show();
						e.preventDefault();
					});
				});
			});
</script>

.wgo-tabs {
	border-bottom: 1px solid #e9e9e9;
}
.wgo-tabs li {
	list-style:none;
	display:inline-block;
	margin: 0 0 0 -5px;
	position: relative;
}
.wgo-tabs a {
	padding:0px 10px 0px 10px;
	display:inline-block;
	background:#d3dce6;
	color:#7b8898;
	text-decoration:none;
	line-height: 24px;
	margin: 6px 3px;
	border-radius: 3px;
}
.wgo-tabs li:first-child {margin-right: 5px;}
.wgo-tabs a:before {
	content: "\271A";
	font: 11px Tahoma;
	float: right;
	text-align: center !important;
	margin: 3px -3px 0 7px;
	padding-right: 1px;
}
.wgo-tabs a.active {
	color: #fff;
	background: #2ecc71;
}
.wgo-tabs a.active:before {content: "\2714";}

<!-- what's going on box -->
	<div id="wgo" class="collapse wgo_block block">
		<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
		<div class="blockbody formcontrols floatcontainer">
			{vb:raw template_hook.forumhome_wgo_pos1}
		<ul class='wgo-tabs'>
			<vb:if condition="$show['loggedinusers']"><li class="one"><a href='#wgo_onlineusers'>اعضاي آنلاين</a></li></vb:if>
			<vb:if condition="$show['wgo_members']"><li class="two"><a href='#wgo_wgo_members_users'>اعضا</a></li></vb:if>
			<vb:if condition="$show['upcomingevents']"><li class="three"><a href='#wgo_events'>مناسبتها</a></li></vb:if>
			<vb:if condition="$show['birthdays']"><li class="four"><a href='#wgo_birthdays'>تولد</a></li></vb:if>
			<li class="five"><a href='#wgo_stats'>آمار کلي</a></li>
		</ul>	
			<vb:if condition="$show['loggedinusers']">
			<!-- logged-in users -->
			<div id="wgo_onlineusers" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/users_online.png" alt="{vb:rawphrase currently_active_users}" />{vb:rawphrase currently_active_users}</h3>
				<div>
					<p>{vb:rawphrase there_are_x_y_online_link, {vb:raw totalonline}, {vb:raw session.sessionurl_q}} <span class="shade">{vb:rawphrase x_members_and_y_guests, {vb:raw numberregistered}, {vb:raw numberguest}}</span></p>
					<p>{vb:rawphrase most_users_ever_online_was_x_y_at_z, {vb:raw recordusers}, {vb:raw recorddate}, {vb:raw recordtime}}</p>
					<vb:if condition="$activeusers">
					<ol class="commalist" id="wgo_onlineusers_list">
						<vb:each from="activeusers" value="loggedin">
							<li>{vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw loggedin}}">{vb:raw loggedin.musername}</a>{vb:raw loggedin.invisiblemark}{vb:raw loggedin.buddymark}{vb:raw loggedin.comma}</li>
						</vb:each>
					</ol>
					</vb:if>
				</div>
			</div>
			<!-- end logged-in users -->
			</vb:if>
			{vb:raw template_hook.forumhome_wgo_pos2}
			<!-- Start Members Today -->
			<vb:if condition="$show['wgo_members']">
			<div id="wgo_wgo_members_users" class="wgo_subblock section collapse">
				<h3 class="blocksubhead"><a href="{vb:raw wgo_members.url}"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:phrase wgo_members_alt_title}"/></a>{vb:raw wgo_members.whotitle}</h3>
				<a class="collapse" id="collapse_wgo_members_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b{vb:raw wgo_members.collapse}.png" alt="" title="{vb:rawphrase collapse_expand}" /></a>
				<div id="wgo_members_list" {vb:raw wgo_members.style}>
					<p>{vb:raw wgo_members.visitors}</p>
					<vb:if condition="$vboptions['wgo_members_names']">
						<vb:if condition="$wgo_members['totaltoday'] == 0">
							{vb:phrase no_members_list} 
						<vb:else />
							<ul class="commalist" id="wgo_wgo_members_list">
								<vb:if condition="$wgo_members['template_hook']">
									{vb:raw wgo_members.template_hook}
								<vb:else />
									<vb:each from="wgo_members_list" value="row">
										<li>{vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw row}}" title="{vb:raw row.wrdate}">{vb:raw row.musername}</a>{vb:raw row.markinv}{vb:raw row.comma}</li>
									</vb:each>
								</vb:if>
							</ul>
						</vb:if>
					<vb:else />
						{vb:phrase member_list_disabled} 
					</vb:if>
				</div>
			</div>
			</vb:if>
			<!-- End Members Today -->
			{vb:raw template_hook.forumhome_wgo_pos6}
			<vb:if condition="$show['upcomingevents']">
			<div id="wgo_events" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/event.png" alt="{vb:rawphrase todays_events}" /><vb:if condition="$show['todaysevents']">{vb:rawphrase todays_events}<vb:else />{vb:rawphrase upcoming_events_for_the_next_x_days, {vb:raw vboptions.showevents}}</vb:if></h3>
				<ol>
					{vb:raw upcomingevents}
				</ol>
			</div>
			</vb:if>
			{vb:raw template_hook.forumhome_wgo_pos3}
			<vb:if condition="$show['birthdays']">
			<!-- today's birthdays -->
			<div id="wgo_birthdays" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/birthday.png" alt="{vb:rawphrase todays_birthdays}" />{vb:rawphrase todays_birthdays}</h3>
				<ol class="commalist">
					<vb:each from="birthdays" value="row">
						<li><a href="{vb:link member, {vb:raw row}}">{vb:raw row.username}</a><vb:if condition="$row['age']"> ({vb:raw row.age})</vb:if>{vb:raw row.comma}</li>
					</vb:each>
				</ol>
			</div>
			<!-- end today's birthdays -->
			</vb:if>
			{vb:raw template_hook.forumhome_wgo_pos4}
			<div id="wgo_stats" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}" />{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}</h3>
				<div>
					<dl>
						<dt>{vb:rawphrase threads}</dt>
							<dd>{vb:raw totalthreads}</dd>
						<dt>{vb:rawphrase posts}</dt>
							<dd>{vb:raw totalposts}</dd>
						<dt>{vb:rawphrase members}</dt>
							<dd>{vb:raw numbermembers}</dd>
						<vb:if condition="$show['activemembers']">
							<dt>{vb:rawphrase active_members}</dt>
							<dd>{vb:raw activemembers}</dd>
						</vb:if>
					</dl>
					<p>{vb:rawphrase welcome_to_our_newest_member_x, {vb:link member, {vb:raw newuserinfo}}, {vb:raw newuserinfo.username}}</p>
					{vb:raw template_hook.forumhome_wgo_stats}
				</div>
			</div>
			{vb:raw template_hook.forumhome_wgo_pos5}
		</div>
	</div>
	<!-- end what's going on box -->

<!-- what's going on box -->
	<div id="wgo" class="collapse wgo_block block">
		<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
		<div class="blockbody formcontrols floatcontainer">
			{vb:raw template_hook.forumhome_wgo_pos1}
		<ul class='wgo-tabs'>
			<vb:if condition="$show['loggedinusers']"><li class="one"><a href='#wgo_onlineusers'>اعضای آنلاين</a></li></vb:if>
			<vb:if condition="$show['wgo_members']"><li class="two"><a href='#wgo_wgo_members_users'>اعضا</a></li></vb:if>
			<vb:if condition="$show['upcomingevents']"><li class="three"><a href='#wgo_events'>مناسبتها</a></li></vb:if>
			<vb:if condition="$show['birthdays']"><li class="four"><a href='#wgo_birthdays'>تولد</a></li></vb:if>
			<li class="five"><a href='#wgo_stats_tab'>آمار کلی</a></li>
		</ul>	
			<vb:if condition="$show['loggedinusers']">
			<!-- logged-in users -->
			<div id="wgo_onlineusers" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/users_online.png" alt="{vb:rawphrase currently_active_users}" />{vb:rawphrase currently_active_users}</h3>
				<div>
					<p>{vb:rawphrase there_are_x_y_online_link, {vb:raw totalonline}, {vb:raw session.sessionurl_q}} <span class="shade">{vb:rawphrase x_members_and_y_guests, {vb:raw numberregistered}, {vb:raw numberguest}}</span></p>
					<p>{vb:rawphrase most_users_ever_online_was_x_y_at_z, {vb:raw recordusers}, {vb:raw recorddate}, {vb:raw recordtime}}</p>
					<vb:if condition="$activeusers">
					<ol class="commalist" id="wgo_onlineusers_list">
						<vb:each from="activeusers" value="loggedin">
							<li>{vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw loggedin}}">{vb:raw loggedin.musername}</a>{vb:raw loggedin.invisiblemark}{vb:raw loggedin.buddymark}{vb:raw loggedin.comma}</li>
						</vb:each>
					</ol>
					</vb:if>
				</div>
			</div>
			<!-- end logged-in users -->
			</vb:if>
			<!-- Start Members Today -->
			<vb:if condition="$show['wgo_members']">
			<div id="wgo_wgo_members_users" class="wgo_subblock section collapse">
				<h3 class="blocksubhead"><a href="{vb:raw wgo_members.url}"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:phrase wgo_members_alt_title}"/></a>{vb:raw wgo_members.whotitle}</h3>
				<a class="collapse" id="collapse_wgo_members_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b{vb:raw wgo_members.collapse}.png" alt="" title="{vb:rawphrase collapse_expand}" /></a>
				<div id="wgo_members_list" {vb:raw wgo_members.style}>
					<p>{vb:raw wgo_members.visitors}</p>
					<vb:if condition="$vboptions['wgo_members_names']">
						<vb:if condition="$wgo_members['totaltoday'] == 0">
							{vb:phrase no_members_list} 
						<vb:else />
							<ul class="commalist" id="wgo_wgo_members_list">
								<vb:if condition="$wgo_members['template_hook']">
									{vb:raw wgo_members.template_hook}
								<vb:else />
									<vb:each from="wgo_members_list" value="row">
										<li>{vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw row}}" title="{vb:raw row.wrdate}">{vb:raw row.musername}</a>{vb:raw row.markinv}{vb:raw row.comma}</li>
									</vb:each>
								</vb:if>
							</ul>
						</vb:if>
					<vb:else />
						{vb:phrase member_list_disabled} 
					</vb:if>
				</div>
			</div>
			</vb:if>
			<!-- End Members Today -->
			<vb:if condition="$show['upcomingevents']">
			<div id="wgo_events" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/event.png" alt="{vb:rawphrase todays_events}" /><vb:if condition="$show['todaysevents']">{vb:rawphrase todays_events}<vb:else />{vb:rawphrase upcoming_events_for_the_next_x_days, {vb:raw vboptions.showevents}}</vb:if></h3>
				<ol>
					{vb:raw upcomingevents}
				</ol>
			</div>
			</vb:if>
			<vb:if condition="$show['birthdays']">
			<!-- today's birthdays -->
			<div id="wgo_birthdays" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/birthday.png" alt="{vb:rawphrase todays_birthdays}" />{vb:rawphrase todays_birthdays}</h3>
				<ol class="commalist">
					<vb:each from="birthdays" value="row">
						<li><a href="{vb:link member, {vb:raw row}}">{vb:raw row.username}</a><vb:if condition="$row['age']"> ({vb:raw row.age})</vb:if>{vb:raw row.comma}</li>
					</vb:each>
				</ol>
			</div>
			<!-- end today's birthdays -->
			</vb:if>
			<div id="wgo_stats_tab">
			<div id="wgo_stats" class="wgo_subblock section">
				<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}" />{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}</h3>
				<div>
					<dl>
						<dt>{vb:rawphrase threads}</dt>
							<dd>{vb:raw totalthreads}</dd>
						<dt>{vb:rawphrase posts}</dt>
							<dd>{vb:raw totalposts}</dd>
						<dt>{vb:rawphrase members}</dt>
							<dd>{vb:raw numbermembers}</dd>
						<vb:if condition="$show['activemembers']">
							<dt>{vb:rawphrase active_members}</dt>
							<dd>{vb:raw activemembers}</dd>
						</vb:if>
					</dl>
					<p>{vb:rawphrase welcome_to_our_newest_member_x, {vb:link member, {vb:raw newuserinfo}}, {vb:raw newuserinfo.username}}</p>
					{vb:raw template_hook.forumhome_wgo_stats}
				</div>
			</div>
			{vb:raw template_hook.forumhome_wgo_pos2}
			{vb:raw template_hook.forumhome_wgo_pos3}
			{vb:raw template_hook.forumhome_wgo_pos4}
			{vb:raw template_hook.forumhome_wgo_pos5}
			{vb:raw template_hook.forumhome_wgo_pos6}
			</div>
		</div>
	</div>
	<!-- end what's going on box -->