Javascript'te Div Gösterme ve Gizleme Kısayolu Var mı?

Merhabalar. Üzerinde uğraştığım bir tema var. Aşağıdaki resme göre anlatacağım. Şimdi, index sayfasında, sayfayı açınca direk gelen birkaç ürün var. Sayfa açılınca 1.link'in ürünleri geliyor direk. 2. linke tıklayınca da birinci kaybolacak. Ben bunu şu şekilde yapabiliyorum. 1. link için bu şekilde. 2. link içinde bu şekilde uzayıp gidecek. Bir de link sayısı 3-4 değil. 8 adet link var. Acaba bunun kısa bir yolu var mı? Javascript kütüphaneleriyle ilgili hiçbir bilgim yok. Yani jquery türü şeyleri hiç bilmiyorum. Javascript'te bunun kısa bir yolu var mı?

        <script>
            function gizle() {
                document.getElementById('1').style.display = "block";
                document.getElementById('2').style.display = "none";
                document.getElementById('3').style.display = "none";
            }
        </script>

Cevap veren yok mu arkadaşlar.

Merhaba, aşağıdaki kodu incelerseniz mantığını anlamanıza yardımcı olacaktır. Kolay gelsin.

<a href="#" onclick="show('bir')">1</a>
<a href="#" onclick="show('iki')">2</a>
<a href="#" onclick="show('uc')">3</a>

<div id="bir" class="test">
<p>
Div 1
</p>
</div>
<div id="iki" class="test" style="display:none">
<p>
Div 2
</p>
</div>
<div id="uc" class="test" style="display:none">
<p>
Div 3
</p>
</div>

<script>
function show(id){
document.querySelectorAll('.test').forEach(function(el) {
   el.style.display = 'none';
});
document.getElementById(id).style.display= 'block';
}
</script>

Bu kodlarla birine tıklayınca diğeri kaybolmuyor. Biri varken diğeri ekleniyor.

Yapmaya çalıştığınız şey ya çapa yada tabmenu. Çapa konusunda scroll'suz bir sayfanız olması gerekiyor bahsettiğiniz yapıya göre. Sizin için en mantıklısı bildiğimiz tabmenu mantığıdır. Bootstrap kullanmıyorsanız javascript ile nasıl tabmenu yapılacağı konusunda linki aşağı bırakıyorum. İlk hangisinin açık gelmesini istiyorsanız ona active class'ını verirsiniz.

https://www.w3schools.com/howto/tryi...tryhow_js_tabs

Bir yerde hata yapıyorsunuzdur, https://jsfiddle.net/Low5gmuz/ linkinden çalışır halini görebilirsiniz.

makro, sizin yaptığınız kodlar ayrı bir sayfada çalışıyor ama benim dosyalarda çalıştıramadım.

Sorunu anlayabilmek için kodlarınızı görmek lazım, bir yerde çalıştırarak link gönderebilirseniz inceleyebilirim.

kendi kodlamalarımda kullandığım mantık, block durumundaki divi none yapmak, href ile gelen idi block yapmaktır. Böylece 200 tane link olsa bile benim scriptimin uzunluğu hep aynı kalır ve ekleme/çıkarma yapmaya ihtiyacım olmaz:

<a href="javascript:getir(1)">Ürün 1</a>
<a href="javascript:getir(2)">Ürün 2</a>
<a href="javascript:getir(3)">Ürün 3</a>
<a href="javascript:getir(4)">Ürün 4</a>
<a href="javascript:getir(5)">Ürün 5</a>
<a href="javascript:getir(6)">Ürün 6</a>
<a href="javascript:getir(7)">Ürün 7</a>
<a href="javascript:getir(8)">Ürün 8</a>

<div id="container">
<div id="alt1">Alt 1</div>
<div id="alt2">Alt 2</div>
<div id="alt3">Alt 3</div>
<div id="alt4">Alt 4</div>
<div id="alt5">Alt 5</div>
<div id="alt6">Alt 6</div>
<div id="alt7">Alt 7</div>
<div id="alt8">Alt 8</div>
</div>

<style>div[id^="alt"]{display:none}</style>

<script>

var eskiAltBaslik=false

function getir(urunNo){
if(eskiAltBaslik){document.getElementById("alt"+eskiAltBaslik).style.display="none"}
document.getElementById("alt"+urunNo).style.display="block"
eskiAltBaslik=urunNo
}

</script>