Element Gizleme [code language=”html”] <div id="displayDivId" style="display: none;"></div> <div id="visiblityDivId" style="visibility: hidden;"></div> [/code]
Element Gösterme
[code language=”html”] <div id="displayDivId" style="display: block;"></div> <div id="visiblityDivId" style="visibility: visible;"></div> [/code]JQuery ile tatbik edelim
JQuery de “JQuery” yada “$” anahtar kelimeleri kullanılabilmektedir. “attr” özelliğini kullanılabilir yada “css” kullanılabilir.JQuery Div Gizleme fonksiyonu
[code language=”js”] jQuery("#displayHideDivId").attr("style", "display: none"); [/code]JQuery Div Gösterme fonksiyonu
[code language=”js”] $(".hiddenText").css("display", "block"); [/code]JQuery Örneği Kodu
Bu örnekte jquery kütüphanesine ihtiyacınız olacaktır. Bu yazıyı tıklayarak jquery kütüphanesini indirebilirsiniz. [code language=”html”] <!DOCTYPE html> <html> <head> <title>hide show with JQuery example | JQuery ile gizleme gösterme örneği | www.yazilimcity.net</title> <meta charset="utf-8"/> <!–local library–> <!–<script type="text/javascript" src="../../includes/lib/js/jquery-1.8.2.js"></script>–> <!–online library–> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> //hide div var hideDiv = function () { jQuery("#displayHideDivId").attr("style", "display: none"); }; //show div function showDiv() { $("#displayHideDivId").attr("style", "display: block"); } //show second div $(".showText").live(‘click’, function () { $(".hiddenText").attr("style", "display: block", "background-color: #00ced1"); }); //hide second div var hideText = function () { $(".hiddenText").css("display", "none"); } </script> </head> <body> <div id="displayHideDivId" style="background-color: #00ced1;" onclick="hideDiv()"> buraya tıklayınca yazı gizlenecek </div> <input type="button" value="yazıyı göster" onclick="showDiv()"> <hr style="color: #8b0000;"> <div class="hiddenText" style="display: none;"> başlangıçta gizliydi </div> <button class="showText">yazıyı göster</button> <a href="javascript:hideText()">yazıyı tekrar gizle</a> <footer> <b> <address> <a href="http://www.yazilimcity.net">www.yazilimcity.net</a> </address> </b> </footer> </body> </html> [/code]Gerçek Zamanlı JQuery Örneği
]]>hide show with JQuery buraya tıklayınca yazı gizlenecek
yazıyı tekrar gizle
gizli kodlara müdahale edemiyorum
sorunsuz çalışmaktadır. iletişim e-posta adresimizden kod bloğunuzu gönderirseniz kontrol edelim