Почему идет скачок вверх страницы скрипт JS?

Question

[ValeraValera]

делаю табы на JS
по клику на ссылку onclick="openHistoryCard('history_card_2')" сразу показывается нужный блок history_card_N, но сразу же после клика страница прыгает вверх и все равно активным становится первый блок history_card_1
в чем может быть проблема ?
вот html разметка

<div id="history_card_1" class="history">
					<div class="columns three">
						<div class="history_author">
							<div class="history_author_photo">
								<img src="/img/history/history_author_1.png" alt="">
							</div>
						</div>
					</div>
					<div class="columns nine">
						<div class="history_text">
							<span class="history_text_metadata">
							Анна Петрова, 26 лет. Самара 111
							</span>
							<p class="history_text_p">
								Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. 
							</p>
						</div>
						
					</div>
				</div>

<ul class="history_control offset-by-five">
						<li><a href="" onclick="openHistoryCard('history_card_1')">1</a></li>
						<li><a href="" onclick="openHistoryCard('history_card_2')">2</a></li>
						<li><a href="" onclick="openHistoryCard('history_card_3')">3</a></li>
						<li><a href="" ></a></li>
						<li><a href="" ></a></li>
						<li><a href="" ></a></li>
					</ul>

CSS

line-height: 24px;
	font-family: "Open sans", serif;
	display: none;
}

и сам JS

openHistoryCard("history_card_1")
			function openHistoryCard(cardName) {
    		var i;
    		var x = document.getElementsByClassName("history");
    		for (i = 0; i < x.length; i++) {
       			x[i].style.display = "none";
    			}
    		document.getElementById(cardName).style.display = "block";
			}

Answer 1

[CyberHost]

<!-- Добавь ивент в параметры -->
...
<li><a href="" onclick="openHistoryCard(event, 'history_card_1')">1</a></li>
...

function openHistoryCard(e, cardName) { // принимаем ивент

                e.preventDefault(); // запрещаем елементу выполнить стандартное действие

    		var i;
    		var x = document.getElementsByClassName("history");
    		for (i = 0; i < x.length; i++) {
       			x[i].style.display = "none";
    			}
    		document.getElementById(cardName).style.display = "block";
      }