Вкладки - содержимое необходимо скрывать при загрузке страницы и показывать при нажатии

Question

Я создал систему вкладок. Похоже, что он отлично работает на JSFiddle для того, что мне нужно, за исключением того, что здесь выполняется код ошибки, и мне нужно, чтобы содержимое вкладки на обеих вкладках сначала скрывалось и отображалось только при нажатии на вкладку (изображения). Может ли кто-нибудь помочь в решении этих проблем?

Я совершенно новичок в Javascript. Заранее спасибо.

Я новичок в Javascript, поэтому вам нужна небольшая помощь. Заранее спасибо!

$('span.a, span.b').click(function() { 
 
    if (!$(this).hasClass('active')) { 
 
    $('span.a, span.b').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('div.a, div.b').toggle(); 
 
    } 
 
});

div { 
 
    margin-top: 40px; 
 
    width: 80%; 
 
    text-align: left; 
 
}

<center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> 
 
    <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> 
 
    <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a 
 
    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large 
 
    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> 
 
    <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our 
 
    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory 
 
    and consultation services.</div> 
 
</center>

Answer 1

Добавление JQuery в конце тега тела (в фрагменте кода это конец HTML кода) решает вашу проблему.

Пожалуйста, дайте мне знать, если это то, что вы хотели знать.

Поскольку код JS использует синтаксис библиотеки JQuery, вам нужно добавить библиотеку JQuery, как это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Для потайных частей вы можете сделать дивы скрыть от:

div.a, 
div.b { 
    visibility:hidden; 
} 

И затем в js изменить видимость на видимый при нажатии

$('div.a, div.b').css("visibility","visible") 

Видимость скрывает содержимое, но пространство будет по-прежнему потребляться. Если вы хотите, чтобы невидимый контент занимал какое-либо место на странице, играйте с свойством «display» css вместо видимости.

Вы можете найти полный код ниже:

$('span.a, span.b').click(function() { 
 
    if (!$(this).hasClass('active')) { 
 
    $('span.a, span.b').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('div.a, div.b').toggle(); 
 
    } 
 
    $('div.a, div.b').css("visibility","visible") 
 
});

div { 
 
    margin-top: 40px; 
 
    width: 80%; 
 
    text-align: left; 
 
} 
 
div.a, 
 
div.b { 
 
    visibility:hidden; 
 
}

<center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> 
 
    <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> 
 
    <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a 
 
    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large 
 
    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> 
 
    <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our 
 
    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory 
 
    and consultation services.</div> 
 
</center> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>