Bu yazımızda aktif div getirme yani seçili elementi gösterme fonksiyonunu paylaşacağım.
Jquery tıklanan elemanı bulma
gibi örneklerinizde, kodlarınızda kullanabilirsiniz. Javascript ile aktif elementi görmeyi, yakalamayı aşağıda paylaştığım örnekle yapabilirsiniz.
Aşağıda verilen kodlar hazır çalıştıralabilecek şekilde “html + css + js” kodlarıyla birlikte verilmiştir.Aşağıda paylaşılan kodların tümünü kopyalayıp “.html” olarak kayıt ettiğinizde canlı olarak çalıştırabilirsiniz.
<html>
<head>
<title>Aktif Elementleri bulma gösterme Görüntüle</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.active {
color:red;
text-decoration:underline;
};
div {
line-height: 1.6;
};
</style>
</head>
<body>
<h3>TIKLANAN (AKTİF) SATIR KIRMIZI OLUCAK</h3>
<div class="geneldiv">
<div class="item active" id="bir">1.SATIR TEXT(Varsayılan Aktif)</div>
<div class="item" id="iki">2.SATIR TEXT</div>
<div class="item" id="uc">3.SATIR TEXT</div>
<div class="item" id="dort">4.SATIR TEXT</div>
<div class="item" id="bes">5.SATIR TEXT</div>
<div class="item" id="alti">6.SATIR TEXT</div>
<div class="item" id="yedi">7.SATIR TEXT</div>
</div><br>
<button id="bas">Konsol+Aşağıda Görüntüle</button><br><br>
<div style="border: 1px solid black; width:180px; height:30px;" id="kayit"></div>
<script type="text/javascript">
$('.item').click(function() {
$(this).toggleClass('active');
});
function aktifdivgoster() {
var aktifDiv="";
$(".geneldiv > div").each(function (e) {
if ($(this).hasClass('active')) { /*Farklı şart düşünebilirsiniz görünürlüğe göre || if ($(this).css('display') != 'none') { */
aktifDiv=$(this).attr("id");
if(aktifDiv) {
console.log(aktifDiv);
$("#kayit").append(aktifDiv + " ");
}
}
});
return aktifDiv;
};
$("#bas").on("click", function() {
$("#kayit").text("");
console.clear();
aktifdivgoster();
});
</script>
</body>
</html>
