Bạn muốn làm chủ Website?

Code ẩn hiện nội dung khi click cho blogger/blogspot

Bạn đang muốn tìm code ẩn hiện nội dung cho blogger khi người dùng click vào nhưng không biết làm như thế nào? Bạn đang đau đầu và nhờ sự trợ giúp ở khắp nơi, lục tung google nhưng cũng không thấy hướng dẫn để làm theo? Không sao, chỉ cần bạn đến với TOICODE mọi thứ sẽ trở nên rất dễ dàng, bài viết này mình sẽ hướng dẫn chi tiết về js ẩn hiện nội dung khi click cho blogger/blogspot.

DEMO: Các bạn có thể xem tại ZizuTV

Sơ lược về code ẩn hiện nội dung cho blogger

Code này sử dụng hai thuộc tính css là display:none và để ẩn nội dung khi click, lúc đầu ta thêm một class có display là none để ẩn và khi click vào thì  sẽ xóa class đó đi để hiện nội dung đã ẩn.

Nếu các bạn sử dụng boottrap thì css có sẵn trong thư viện là .hide hay .hidden.

Js ẩn hiện nội dung khi click

<script>
//<![CDATA[
 $(document).ready(function() {
   $('.danhsachtap').addClass('hidden');
   $(".xem").click(function() {
       $('.danhsachtap').removeClass('hidden');
       $('.noidung').css('display', 'none');
   });
 });
//]]>
</script>

Phân tích Js ẩn hiện nội dung

Khi xem một trang HTML thì thẻ có thuộc tính class .danhsachtap sẽ thêm vào class hidden, và khi click vào thẻ có class .xem thì sẽ xóa đi class hidden của thẻ có class .danhsachtap, đồng thời thêm style display:none cho class  .noidung.

Khi bạn hiểu js trên thì có thể áp dụng cho nhiều class khác nhau bằng cách thêm những đoạn tương tự vào js.

Lưu ý: Class hidden ở trên có css là display:none.

Nếu bạn thấy bài viết hữu ích thì hãy chia sẻ nó hoặc theo dõi chúng tôi qua Email để không bỏ lỡ bất kỳ một thủ thuật hay nào nhé! Đừng quên để lại đánh giá của bạn, nó là nguồn động lực vô bờ bến với chúng tôi đấy!

Add Comment

  • Không sử dụng từ khóa trong tên.
  • Không sử dụng từ ngữ phảm cảm.
  • Không dẫn link tới các trang có nội dung không lành mạnh.
  • Không bình luận về chính trị.
  • Mọi bình luận sẽ bị xóa nếu vi phạm mà không báo trước.
  • 21 Comments

    1. 26
      80
      Cáo:

      tuyệt vời rồi ạ 🙂 tks bác

      10/06/2017 Reply
    2. 16

      Axx cái trang demo đẹp & truất thế, không thể tin nổi là nó được làm từ Blogspot luôn ấy @@

      10/06/2017 Reply
    3. 6

      klq nhưng bác thay cái “PHIM LẺ MỚI CẬP NHẬT” đi

      11/06/2017 Reply
      • Boss

        Là sao nhỉ :v

        11/06/2017 Reply
      • Boss

        Cứ tưởng bảo update phim :)))

        11/06/2017 Reply
      • 26
        80
        Cáo:

        do vùng miền đó :3

        11/06/2017 Reply
        • Boss

          Fix css lại là ok ấy mà :))

          11/06/2017 Reply
          • 6

            còn lỗi này nữa bác ạ:

            '+bodyContent+'';jQuery(containerDomObj).html('');jQuery(containerDomObj).append(iframeObj);jQuery(iframeObj).attr('style','border:0;padding:0;margin:0;width:'+width+';height:'+height);jQuery(iframeObj).attr('scrolling','no');jQuery(iframeObj).attr('id',id);iframeObj.contentWindow.document.open();iframeObj.contentWindow.document.write(html);iframeObj.contentWindow.document.close();if(width=='100%'&&height=='100%') jQuery(containerDomObj).css('overflow','hidden');return iframeObj}catch(err){console.error('Create iframe fail: '+err.message);return!1}}	//]]>

            13/06/2017 Reply
            • Admin
              Shin:

              Sau chèn code nhớ chèn trong cặp thẻ <pre></pre> nhé 😀

              13/06/2017 Reply
    4. 4
      22

      Demo kiểu vượn gì để ngoài trang chủ vậy bạn.

      16/06/2017 Reply
      • 26
        80
        Cáo:

        ai làm site phim sẽ hiểu thôi 😀

        16/06/2017 Reply
      • Admin
        Shin:

        Nó gần như tương tự với cái button tìm kiếm trên menu của mình ấy. Khi click vào thì nó hiện khung tìm kiếm ra 🙂

        17/06/2017 Reply
    5. 1

      bạn hướng dẫn chèn cụ thể đi bạn, mình khôgn biết chèn chỗ nào cả

      06/09/2017 Reply

    Nhận bài viết mới