Tabs 2 (BEM)

inidex.html

<!-- HTML -->
<div class="tabs">

    <ul class="tabs__nav-list clear_fix">
        <li class="tabs__nav-item active">
           <a href="" class="tabs__nav-link">Tab 1</a>
        </li>
        <li class="tabs__nav-item">
           <a href="" class="tabs__nav-link">Tab 2</a>
        </li>
    </ul>   

    <ul class="tabs__list">
        <li class="tabs__item active">
            <h1>Title 1</h1>
            <p>Text tab 1</p>
        </li>
        <li class="tabs__item">
            <h1>Title 2</h1>
            <p>Text tab 2</p>
        </li>
    </ul>

</div>

main.css

/* CSS */
.tabs {
    width: 300px;   
    height: 250px;  
    margin: 0 auto;
    margin-top: 100px; 
    background-color: #eee; 
    color: #555;
}
.tabs__nav-list {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
.tabs__nav-list .active {
    background-color: #9bcce3;
}
.tabs__nav-item {
    float: left;
    list-style: none;
    width: 50%;
}
.tabs__nav-link {
    color: #555;
    font-size: 16px;
    padding: 10px; 
    display: block;
}
.tabs__list .active {
    display: block;
    padding: 20px;
    height: 100%; 
}
.tabs__item {
    display: none;  
}

main.js

//JS
$('.tabs__nav-link').on('click', function(e) {
		e.preventDefault();
		var tabLink = $(this).closest('.tabs__nav-item'),
			tabItem = $('.tabs__item'),
			itemNumber = tabLink.index();

			// Variant 1
			tabItem.eq(itemNumber)
				.add(tabLink)
				.addClass('active')
				.siblings().removeClass('active');

});