Tab

A tab is used to quickly search for information within the same context.
If you need to provide a large amount of information after separating them by topic, refer to the tab UI guidelines of Click to Buy.

Basic Tab

Basic Tab is preferably used to display the primary navigation. It can also be used to display the secondary navigation.
With tab navigation, the active navigation item is highlighted by means of a rectangular block in the background color of the content section.
The width of the basic tab is not fixed and changes to a shape that can be scrolled vertically, if the width of the screen becomes smaller than a certain size.

APC

BMobile - Maximum of 2 content

BMobile - more than 3 contents


<div class="tab_wrap" id="tabcase01">
	<ul class="tablist" role="tablist">
		<li><button class="tab">Tab 01</button></li>
		<li><button class="tab">Tab 02</button></li>
		<li><button class="tab">Tab 03</button></li>
	</ul>
	<div class="tab_contents">
		<section class="tab_panel">
			Tab 01 contents
		</section>
		<section class="tab_panel">
			Tab 02 contents
		</section>
		<section class="tab_panel">
			Tab 03 contents
		</section>
	</div>
</div>

Line Tab

Line Tab is preferably used to display the secondary navigation. It can also be used to display the primary navigation.

For Line Tabs, as the text becomes longer, the tab bar becomes longer.

APC

BMOBILE


<div class="tab_wrap" id="tabcase01_line">
	<ul class="tablist _line" role="tablist">
		<li><button class="tab">Tab 01</button></li>
		<li><button class="tab">Tab 02</button></li>
		<li><button class="tab">Tab 03</button></li>
	</ul>
	<div class="tab_contents">
		<section class="tab_panel">
			Tab 01 contents
		</section>
		<section class="tab_panel">
			Tab 02 contents
		</section>
		<section class="tab_panel">
			Tab 03 contents
		</section>
	</div>
</div>

Function Call Tab

For the Function Call tab, click a specific tab to add a function call.


* Tab control, if required, call actv TabList function after inheriting manualfn class

	<div class="tab_wrap manualfn"  id="tabcase04">
		<ul class="tablist _line" role="tablist">
			<li><button class="tab">Tab 01</button></li>
			<li><button class="tab">Tab 02</button></li>
			<li><button class="tab">Tab 03</button></li>
		</ul>
		<div class="tab_contents">
			<section class="tab_panel">
				Tab 01 contents
			</section>
			<section class="tab_panel">
				Tab 02 contents
			</section>
			<section class="tab_panel">
				Tab 03 contents
			</section>
		</div>
	</div>	
	<script>
	$(document).ready(function(){
		actvTabList('tabcase04', 1);
		actvTabList('tabID', Specific Tab Index);
	});
	</script>

https://ctbguidesystem.com/Front/E2E/click-to-buy/select_trims.html

Radio Tab

Tab menu with radio button UI.

AType 1

OnlineApplication with Click to Buy

OfflineApply directly to the bank and upload the documents

BType 2

Radio tab1
Radio tab2


<div class="select_radio">
      <p class="radiowrap _boxing"><input type="radio" name="loanType" id="loanType1" class="online" checked><label for="loanType1">Online<span>Application with Click to Buy</span></label></p>
      <p class="radiowrap _boxing"><input type="radio" name="loanType" id="loanType2" class="offline"><label for="loanType2">Offline<span>Apply directly to the bank and upload the documents</span></label></p>
    </div>

<div class="tab_wrap" id="tabRadio02">
	<ul class="radio_tablist _type02" role="tablist">
		<li><p class="radiowrap" role="tab" aria-selected="true"><input type="radio" name="tabradio2" id="tabradio1" checked><label for="tabradio1">Radio tab1</label></p></li>
		<li><p class="radiowrap" role="tab" aria-selected="false"><input type="radio" name="tabradio2" id="tabradio2"><label for="tabradio2">Radio tab2</label></p></li>
	</ul>
	<div class="tab_contents">
		<section class="tab_panel">
			Tab 01 contents
		</section>
		<section class="tab_panel">
			Tab 02 contents
		</section>
	</div>
</div>

<div class="select_radio">
 <p class="radiowrap _boxing"><input type="radio" name="loanType" id="loanType1" class="online" checked><label for="loanType1">Online<span>Application with Click to Buy</span></label></p>
 <p class="radiowrap _boxing"><input type="radio" name="loanType" id="loanType2" class="offline"><label for="loanType2">Offline<span>Apply directly to the bank and upload the documents</span></label></p>
</div>