AFAIK, нет никакого способа динамически менять содержимое на странице без использования какого-либо javascript. Поэтому я думаю, вам придется принять решение тем или иным образом:
- Есть ли веская причина, по которой вы хотите избежать javascript / jquery, или вам просто неудобно его использовать? Если это последнее, я настоятельно рекомендую попробовать, что-то вроде этого было бы очень просто и легко реализовать;вы просто загрузите весь контент со всех этих страниц в вашем блоке контента, а затем воспользуетесь jquery toggle () для переключения между ними. Буду рад провести вас через это, если это будет полезно.
- Если есть другая, неизбежная причина, по которой вы не можете использовать jquery, то я бы порекомендовал просто сделать это старомодным, статичным способом, помещая каждыйиз этих страниц в отдельных представлениях и гиперссылки перенаправляют пользователя на соответствующую страницу.
В любом случае, добро пожаловать в django и удачи в этом! Пожалуйста, не стесняйтесь обратиться, если я могу помочь вам.
РЕДАКТИРОВАТЬ:
Вот быстрый и простой пример того, что вы могли бы сделать. Есть лучшие способы, но это, вероятно, самый простой. Начните с импорта библиотеки jquery, включив ее в базовый шаблон:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Затем поместите весь свой контент внутри для всех четырех страниц в этом блоке, каждая в своем собственном div, с именем класса, которое связано сваши кнопки навигации. По умолчанию скрывайте содержимое, чтобы не показывать сразу все четыре страницы. Итак, что-то вроде:
<style>
.Page {
display: none;
}
</style>
<nav>
<span class="NavItem" id="About">About</span>
<span class="NavItem" id="Contact">Contact</span>
</nav>
<div class="PageContent">
<div class="Page About">Content Here</div>
<div class="Page Contact">More Content Here</div>
</div>
Тогда все, что осталось, это скрипт jquery, который показывает, какой контент соответствует элементу навигации, по которому вы щелкаете:
<script type="text/javascript">
$( '.NavItem' ).click(function() {
// Hide whatever content is currently being displayed
$('.Page').hide();
// Show the content that matches the id of the nav item you clicked
var content = $( this ).attr('id');
$( '.' + content ).show();
});
</script>
И это все! Вот ссылка jsfiddle , чтобы вы могли увидеть ее в действии.