Vichapa kwenye JavaScript

Sasa tutatekeleza vichapa. Mara moja angalia kiolezo cha kile unachohitaji:

Chunguza pia muundo wa wavuti, ambayo tutakuwa tukitatua kazi hiyo:

<div id="parent">
	<div class="menu">
		<a href="" class="active">kichapa 1</a>
		<a href="">kichapa 2</a>
		<a href="">kichapa 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			maandiko ya kichapa 1
		</div>
		<div class="tab">
			maandiko ya kichapa 2
		</div>
		<div class="tab">
			maandiko ya kichapa 3
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}

.menu a {
	margin-right: 5px;
	display: inline-block;
	padding: 10px;
	color: black;
	text-decoration: none;
	border: 1px solid gray;
}
.menu a:hover {
	background: #f8f8f8;
}
.menu a.active {
	border-color: transparent;
	background: #f2f2f2;
}

.tabs .tab:not(.active) {
	display: none;
}
.tabs .tab {
	padding: 10px;
	background: #f2f2f2;
	height: 300px;
}

Makini na ukweli kwamba kiungo active na kichapa active zina darasa active.

Majadiliano

Hebu sasa tujadili jinsi ya kutatua kazi hii. Ni wazi kwamba inahitajika kuweza kuunganisha viungo na vichapa vinavyofanana navyo. Katika somo hili la mtaala wa kinadharia tumechambua tayari chaguzi zinazowezekana.

Katika kesi hii napendekeza kuunganisha viungo na vichapa kwa msimpo tu: kiungo cha kwanza kitafungua kichapa cha kwanza, kiungo cha pili - kichapa cha pili na kadhalika.

Algorithm ya jumla itaonekana hivi: kwa kubonyeza kitufe tunapaswa kupata kiungo chenye darasa na kuiondoa darasa hilo. Vivyo hivyo tunapaswa kupata kichapa chenye darasa hili na pia kuiondoa darasa hilo.

Kisha tunapaswa kuchukua kiungo, ambacho kilibonyezwa na kiweke active. Kisha tunapaswa kuchukua kichapa, ambacho kina nambari sawa, kama kiungo chetu - na pia kikiweke active.

Nakili mwenyewe mifumo ya HTML na CSS iliyotolewa. Tekeleza vichapa kulingana na algorithm iliyoelezewa.