Не применяются стили к классу .active

380
26 ноября 2016, 18:50

Создан блог табуляции

$(function() { 
  $(".tab_item").not(":first").hide(); 
	$(".wrapper .tab").click(function() { 
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); 
	$(".tab_item").hide().eq($(this).index()).fadeIn() 
}).eq(0).addClass("active");	 
});
.wrapper { 
	padding-top: 0; 
} 
 
.wrapper .tabs { 
	border: 1px #cfcdc5 solid; 
	border-radius: 5px; 
	margin-bottom: 24px; 
} 
 
.wrapper .tabs .active { 
	background-color: #43ac2d; 
} 
 
.wrapper .tabs .tab { 
	display: inline; 
	height: 35px; 
	padding-top: 4px; 
	background-image: url(../img/triangle.png); 
	background-position: 25% center; 
	background-repeat: no-repeat; 
	font-size: em(18px); 
	font-family: "ZurichBT-Roman", sans-serif; 
	color: #444137; 
} 
 
.wrapper .tabs .tab:nth-child(2) { 
	border-left: 1px #cfcdc5 solid; 
	border-right: 1px #cfcdc5 solid; 
} 
 
.wrapper .tabs .tab .tab__title { 
	padding-left: 30%; 
}
<div class="wrapper"> 
							<div class="tabs"> 
								<div class="row"> 
									<div class="col-md-4 tab"> 
										<div class="tab__title">By Destination</div> 
									</div> 
									<div class="col-md-4 tab"> 
										<div class="tab__title">By Species</div> 
									</div> 
									<div class="col-md-4 tab"> 
										<div class="tab__title">By Tour Type</div> 
									</div> 
								</div> 
							</div> 
							<div class="tab_content"> 
<!--tab 1--> 
								<div class="tab_item"> 
									<div class="row"> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/elephants.jpg" alt="elephants"> 
												<b>Africa Holidays</b> 
												<p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/americas.jpg" alt="americas holiday"> 
												<b>Americas Holidays</b> 
												<p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/antarctica.jpg" alt="antarctica holidays"> 
												<b>Antarctica Holidays</b> 
												<p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
											</article> 
										</div> 
									</div>		 
									<div class="row"> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/asia.jpg" alt="asia holidays"> 
												<b>Asia Holidays</b> 
												<p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/australasia.jpg" alt="australia holidays"> 
												<b>Australasia Holidays</b> 
												<p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/europe.jpg" alt="europe holidays"> 
												<b>Europe Holidays</b> 
												<p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
											</article> 
										</div> 
									</div>		 
								</div> 
 
<!--tab 2--> 
								<div class="tab_item"> 
									<div class="row"> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/australasia.jpg" alt="australia holidays"> 
												<b>Australasia Holidays</b> 
												<p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/americas.jpg" alt="americas holiday"> 
												<b>Americas Holidays</b> 
												<p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/antarctica.jpg" alt="antarctica holidays"> 
												<b>Antarctica Holidays</b> 
												<p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
											</article> 
										</div> 
									</div>		 
									<div class="row"> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/elephants.jpg" alt="elephants"> 
												<b>Africa Holidays</b> 
												<p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/asia.jpg" alt="asia holidays"> 
												<b>Asia Holidays</b> 
												<p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
											</article> 
										</div> 
										 
										<div class="col-md-4"> 
											<article> 
												<img src="img/europe.jpg" alt="europe holidays"> 
												<b>Europe Holidays</b> 
												<p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
											</article> 
										</div> 
									</div>		 
								</div> 
<!--tab 3--> 
								<div class="tab_item"> 
									<div class="row">										 
										<div class="col-md-4"> 
											<article> 
												<img src="img/americas.jpg" alt="americas holiday"> 
												<b>Americas Holidays</b> 
												<p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/asia.jpg" alt="asia holidays"> 
												<b>Asia Holidays</b> 
												<p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
											</article> 
										</div> 
										 
										<div class="col-md-4"> 
											<article> 
												<img src="img/elephants.jpg" alt="elephants"> 
												<b>Africa Holidays</b> 
												<p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
											</article> 
										</div> 
									</div>		 
									<div class="row"> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/antarctica.jpg" alt="antarctica holidays"> 
												<b>Antarctica Holidays</b> 
												<p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
											</article> 
										</div>										 
										<div class="col-md-4"> 
											<article> 
												<img src="img/europe.jpg" alt="europe holidays"> 
												<b>Europe Holidays</b> 
												<p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
											</article> 
										</div> 
										<div class="col-md-4"> 
											<article> 
												<img src="img/australasia.jpg" alt="australia holidays"> 
												<b>Australasia Holidays</b> 
												<p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
											</article> 
										</div>									 
										 
									</div>		 
								</div>								 
							</div> 
						</div>	

в итоге без .active все хорошо. Данный class создается JS. При этом .active нарушает по левому и правому краям: padding и border-radius не применяются.

update:

update 2:

Answer 1

$(function() { 
  $(".tab_item").not(":first").hide(); 
	$(".wrapper .tab").click(function() { 
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); 
	$(".tab_item").hide().eq($(this).index()).fadeIn() 
}).eq(0).addClass("active");	 
});
.wrapper .tabs { 
  border: 1px #cfcdc5 solid; 
  border-radius: 5px; 
  margin-bottom: 24px; 
} 
 
.wrapper .tabs .tab.active { 
  background-color: #43ac2d; 
} 
 
.wrapper .tabs .tab { 
  height: 35px; 
  font-family: "ZurichBT-Roman", sans-serif; 
  color: #444137; 
	text-align:center; 
} 
 
.wrapper .tabs .tab:nth-child(2) { 
  border-left: 1px #cfcdc5 solid; 
  border-right: 1px #cfcdc5 solid; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="wrapper container"> 
  <div class="tabs"> 
	<div class="container"> 
<div class="row"> 
  <div class="col-md-4 col-sm-4 col-xs-4 tab"> 
    <div class="tab__title"><p>By Destination </p></div> 
  </div>  
  <div class="col-md-4 col-sm-4 col-xs-4 tab"> 
    <div class="tab__title"><p>By Species </p></div> 
  </div> 
  <div class="col-md-4 col-sm-4 col-xs-4 tab"> 
    <div class="tab__title"><p>By Tour Type</p></div>  
  </div> 
</div> 
	</div> 
  </div> 
  <div class="tab_content"> 
<!--tab 1--> 
<div class="tab_item"> 
  <div class="row"> 
    <div class="col-lg-4 col-md-4"> 
      <article> 
        <img src="img/elephants.jpg" alt="elephants"> 
        <b>Africa Holidays</b> 
        <p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
      </article>  
    </div>  
    <div class="col-md-4 col-lg-4"> 
      <article> 
        <img src="img/americas.jpg" alt="americas holiday"> 
        <b>Americas Holidays</b> 
        <p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
      </article> 
    </div> 
    <div class="col-md-4 col-lg-4"> 
      <article> 
        <img src="img/antarctica.jpg" alt="antarctica holidays"> 
        <b>Antarctica Holidays</b> 
        <p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
      </article> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/asia.jpg" alt="asia holidays"> 
        <b>Asia Holidays</b> 
        <p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/australasia.jpg" alt="australia holidays"> 
        <b>Australasia Holidays</b> 
        <p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/europe.jpg" alt="europe holidays"> 
        <b>Europe Holidays</b> 
        <p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
      </article> 
    </div> 
  </div> 
</div> 
 
<!--tab 2--> 
<div class="tab_item"> 
  <div class="row"> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/australasia.jpg" alt="australia holidays"> 
        <b>Australasia Holidays</b> 
        <p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/americas.jpg" alt="americas holiday"> 
        <b>Americas Holidays</b> 
        <p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/antarctica.jpg" alt="antarctica holidays"> 
        <b>Antarctica Holidays</b> 
        <p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
      </article> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/elephants.jpg" alt="elephants"> 
        <b>Africa Holidays</b> 
        <p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/asia.jpg" alt="asia holidays"> 
        <b>Asia Holidays</b> 
        <p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
      </article> 
    </div> 
 
    <div class="col-md-4"> 
      <article> 
        <img src="img/europe.jpg" alt="europe holidays"> 
        <b>Europe Holidays</b> 
        <p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
      </article> 
    </div> 
  </div> 
</div> 
<!--tab 3--> 
<div class="tab_item"> 
  <div class="row"> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/americas.jpg" alt="americas holiday"> 
        <b>Americas Holidays</b> 
        <p>North, South and Central America are <br>home to an incredible diversity of <br>habitats and species, providing <br>opportunities for wildlife holidays to suit all tastes. </p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/asia.jpg" alt="asia holidays"> 
        <b>Asia Holidays</b> 
        <p>Choose a Naturetour wildlife holiday to <br>Asia and benefit from our experience of <br>over 20 years, and amazing network of <br>local contacts, on this incredibly diverse continent.</p> 
      </article>  
    </div>  
 
    <div class="col-md-4"> 
      <article> 
        <img src="img/elephants.jpg" alt="elephants"> 
        <b>Africa Holidays</b> 
        <p>Few wildlife enthusiasts can resist <br> Africa. Its exceptional abundance and <br>variety of wild animals make it one of the <br> world’s top wildlife holiday destinations.</p> 
      </article> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/antarctica.jpg" alt="antarctica holidays"> 
        <b>Antarctica Holidays</b> 
        <p>The ‘Great White Continent’ is perhaps <br>the last true wilderness left on earth and <br> ultimate wildlife holiday destination. </p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/europe.jpg" alt="europe holidays"> 
        <b>Europe Holidays</b> 
        <p>Naturetour wildlife holidays in Europe <br>focus on the outstanding wildlife habitats <br>and species that can be found in the <br>region.</p> 
      </article> 
    </div> 
    <div class="col-md-4"> 
      <article> 
        <img src="img/australasia.jpg" alt="australia holidays"> 
        <b>Australasia Holidays</b> 
        <p>Australia and New Zealand offer <br>extraordinary wildlife in safe, peaceful <br>surroundings. Our tours focus on this <br>continent's unique flora and fauna.</p> 
      </article> 
    </div> 
 
  </div> 
</div> 
  </div> 
<script 
  src="https://code.jquery.com/jquery-2.2.4.min.js" 
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
  crossorigin="anonymous"></script>

Не знаю понял правильно или нет, просто и нечего не написано, что нужно сделать, но сделал так (методом интуиция)

READ ALSO
Неправильно срабатывает javascript код в Firefox

Неправильно срабатывает javascript код в Firefox

Есть страница, которая выполняет дальнейший код в зависимости от координат footer'а:

305
Поменять местами div используя только float

Поменять местами div используя только float

Имея консткрукцию такого вида нужно поменять местами дивы (так, чтобы было 213 и 312) используя только св-ва floatДополнительные обертки не допускаются

381
html5 video ширина ролика

html5 video ширина ролика

каким образом можно растянуть html5 видео? оно сохраняет пропорциивидел вариант с

408
Верстка: main и aside во всю высоту страницы

Верстка: main и aside во всю высоту страницы

Подскажите, как растянуть блоки на всю высоту страницы?

449