изменение разделов страницы со ссылками

Question

Я смущен, что использовать, изменяя только разделы страницы. У меня есть изображение, чтобы сделать мой вопрос более ясным.

О нас раздел содержит ссылки в правой. Каждая ссылка, которую я нажимаю, весь раздел должен измениться. Я знаю, что он использует javascript или ajax для этого, не перезагружая страницу. Есть ли другой способ, которым я мог бы сделать это sonner? Может ли загрузочная карусель быть удобной?

Answer 1

Кассета Bootstraps будет трудно изменить, поскольку она встроена в фреймворк, вы можете использовать пользовательский интерфейс jQuery для вкладок и стилизовать их или создать свой собственный.

Я нашел этот чистый пример CSS, и я думаю, что это то, что вы ищете (кредиты Kezz Bracey), это полностью коллекция вкладок CSS3, все, что вам нужно сделать с этим примером, - это изменить код для работы с вашей страницы (т.е. ее вкладки сверху, ваш находятся справа.)

Anyway, here is the link: 

Pure CSS3 and HTML5 tabs - Codepen

PS: Я бы поставил это в качестве комментария, но моя репутация не высока достаточно , надеюсь, это поможет!

Answer 2

Вам следует попробовать дать каждому разделу раздел id и связать ссылки id. Теперь вы можете использовать jQuery для перехода к этому конкретному разделу при щелчке по ссылке.

function scrollToSection(id){ 
    // Remove "link" from the ID 
    id = id.replace("link", ""); 
    // Scroll 
    $('html,body').animate({ 
    scrollTop: $("#"+id).offset().top}, 
    'slow'); 
} 

$("#sidebar > ul > li > a").click(function(e) { 
    // Prevent a page reload when a link is pressed 
    e.preventDefault(); 
    // Call the scroll function 
    scrollToSection($(this).attr("id"));   
}); 

Заканчивать демо здесь: https://jsfiddle.net/VPzxG/

ИЛИ

Если вы не хотите анимацию при прокрутке в другой раздел, вы можете использовать обычный HTML для этого.

Заканчивать это демо: https://jsfiddle.net/ywxbLswt/

ИЛИ

Если вы хотите, чтобы скрыть/показать разделы, здесь скрипку: https://jsfiddle.net/ywxbLswt/1/

Answer 3

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var option = 'About'; 
     var url = window.location.href; 
     option = url.match(/option=(.*)/)[1]; 
     showDiv(option); 
    }); 
    function showDiv(option) { 
     $('.boxes').hide(); 
     $('#' + option).show(); 
    } 
</script> 

<ul> 
    <li><a href="yourpage.html?option=About">About Us</a></li> 
    <li><a href="yourpage.html?option=Link1">Link1</a></li> 
</ul> 


<div class="boxes" id="About"> 
    <h1>About Us</h1> 
    <p>About content here</p> 
</div> 
<div class="boxes" id="Link1"> 
    <h1>Link1 Header</h1> 
    <p>Link1 content here</p> 
</div> 

Попробуйте это .. надежда это поможет вам.