Примерно так должно работать:
<ul>
<li><a href="#" id="h1" style="display: none;">1</a></li>
<li><a href="#" id="h2">2</a></li>
<li><a href="#" id="h3">3</a></li>
<li><a href="#" id="h4">4</a></li>
<li><a href="#" id="h5">5</a></li>
</ul>
<script>
document.getElementById('h1').onclick = function() {
document.getElementById('h1').style.display = 'none';
document.getElementById('h2').style.display = '';
document.getElementById('h3').style.display = '';
document.getElementById('h4').style.display = '';
document.getElementById('h5').style.display = ''
}
document.getElementById('h2').onclick = function() {
document.getElementById('h1').style.display = '';
document.getElementById('h2').style.display = 'none';
document.getElementById('h3').style.display = '';
document.getElementById('h4').style.display = '';
document.getElementById('h5').style.display = ''
}
document.getElementById('h3').onclick = function() {
document.getElementById('h1').style.display = '';
document.getElementById('h2').style.display = '';
document.getElementById('h3').style.display = 'none';
document.getElementById('h4').style.display = '';
document.getElementById('h5').style.display = ''
}
document.getElementById('h4').onclick = function() {
document.getElementById('h1').style.display = '';
document.getElementById('h2').style.display = '';
document.getElementById('h3').style.display = '';
document.getElementById('h4').style.display = 'none';
document.getElementById('h5').style.display = ''
}
document.getElementById('h5').onclick = function() {
document.getElementById('h1').style.display = '';
document.getElementById('h2').style.display = '';
document.getElementById('h3').style.display = '';
document.getElementById('h4').style.display = '';
document.getElementById('h5').style.display = 'none'
}
</script>
Можно ли как-то сократить скрипт?