как сделать якорь на странице, чтобы при нажатии на ссылку было как на картинке. Работали две ссылки "О доставке" и "Об оплате"


нажимаешь на "Об оплате" и появляется другой текст вместо старого
вот исходный код:
<div class="m-product">
<ul class="nav nav-tabs">
<li class=""><a href="#home" data-toggle="tab" aria-expanded="false">О доставке</a></li>
<li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">Об оплате</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">
<p class="name">Доставка осуществляется транспортной компанией «Нова пошта»</p>
<ul>
<li>Мы предоставляем заказы для клиентов по всей территории Украины в течении 1-2 дней.</li>
<li>Перед оплатой заказа вы можете примерять, а так же осмотреть на соответствие и внешний вид товар.</li>
</ul>
</div>
<div class="tab-pane active" id="profile">
<p class="name">Способы оплаты товара</p>
<ul>
<li>Оплата при получении. Данный способ оплаты действует "Новой почтой наложенным платежом".</li>
<li>Оплата на карту Приват-банка. После оформления заказа, вы оплачиваете стоимость заказа на карту.</li>
</ul>
<div class="note"><span>Почему выгодно платить на карту?</span>
На отделении новой почты, вам не нужно думать сколько у вас всего к оплате вместе с доставкой, и оплачивать наложенный платеж, а просто заберете Ваш заказ, без лишней переплаты.
</div>
</div>
</div>
</div>