Измените содержимое на кнопку крана в группе кнопок начальной загрузки

Question

Я хочу, чтобы изменить содержание ниже в группе кнопок на кране каждой кнопки в группе кнопок.

<div class="btn-group btn-group-lg"> 
<button type="button" class="btn btn-primary segmentedButton ">Section1</button> 
<button type="button" class="btn btn-primary segmentedButton active">Section2</button> 
<button type="button" class="btn btn-primary segmentedButton">Section3</button> 
</div> 

Я не хочу полностью загружать всю страницу. Простое содержание ниже должно быть изменено.

Существующий пример: http://sourcebits.com/app-development-portfolio/ сегментированный контроль. есть ли простой способ реализовать это с помощью html и javascript.

Answer 1

Вы можете создать отдельный контейнер div для каждого раздела, который у вас есть, и присвоить ему атрибут id. Затем на каждой кнопке в группе кнопок вы прикрепляете атрибут, который указывает, какой div он должен отображать при нажатии кнопки.

Demo (с помощью JQuery):

$(function() { 
 

 
    $(".btn").on("click", function() { 
 
    //hide all sections 
 
    $(".content-section").hide(); 
 
    //show the section depending on which button was clicked 
 
    $("#" + $(this).attr("data-section")).show(); 
 
    }); 
 

 
});

.content-section { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-group btn-group-lg"> 
 
    <button type="button" data-section="section1" class="btn btn-primary segmentedButton ">Section1</button> 
 
    <button type="button" data-section="section2" class="btn btn-primary segmentedButton">Section2</button> 
 
    <button type="button" data-section="section3" class="btn btn-primary segmentedButton">Section3</button> 
 
</div> 
 

 
<div class="content-section" id="section1"> 
 
    <h1> Section 1 </h1> 
 
    <p>Section 1 Content goes here</p> 
 
</div> 
 
<div class="content-section" id="section2"> 
 
    <h1> Section 2 </h1> 
 
    <p>Section 2 Content goes here</p> 
 
</div> 
 
<div class="content-section" id="section3"> 
 
    <h1> Section 3 </h1> 
 
    <p>Section 3 Content goes here</p> 
 
</div>