กด refresh หน้าเว็บ เเล้วให้ขึ้นโลหดหน้าเว็บ ที่ขึ้นเเถบโหลดครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา กด refresh หน้าเว็บ เเล้วให้ขึ้นโลหดหน้าเว็บ ที่ขึ้นเเถบโหลดครับ

กด refresh หน้าเว็บ เเล้วให้ขึ้นโลหดหน้าเว็บ ที่ขึ้นเเถบโหลดครับ

ตอนเข้าหน้าเว็บเเล้วมีเเถบรอโหลด มีโค้ดเเล้ว ทีนี้ผมอยากให้กดปุ่ดเเล้วขึ้นเเถบรอโหลด
ตอนเราอยู่เเถบ home ยังไม่เเสดงข้อมูล ถ้าเรากดปุ่ม Success ผมอยากให้ขึ้นเเถบรอโหลด เเล้วมันจะเเสดงข้อมูล ต้องทำยังไงครับ
มีโค้ดเเล้ว เเต่ติดที่จะเอามาใช้ยังไงครับ ขอบคุณครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style type="text/css">
     
    #overlay {   
        position: absolute;  
        top: 0px;   
        left: 0px;  
        background: #ccc;   
        width: 100%;   
        height: 100%;   
        opacity: .75;   
        filter: alpha(opacity=75);   
        -moz-opacity: .75;  
        z-index: 999;  
        background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
    }   
    .main-contain{
        position: absolute;  
        top: 0px;   
        left: 0px;  
        width: 100%;   
        height: 100%;   
        overflow: hidden;
    }
    </style>
</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>


  <div class="tab-content">
  	<div id="overlay"></div>	
    <div id="home" class="tab-pane fade in active ">

      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade active in ">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade active in">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade active in">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>

</div>
<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});

$("#home.tab-pane").removeClass("active in"); // เริ่มต้นไม่แสดง
 $("#menu1.tab-pane").removeClass("active in"); // เริ่มต้นไม่แสดง 
$("#menu2.tab-pane").removeClass("active in");
$("#menu3.tab-pane").removeClass("active in");
  var tabHome = null; // สร้างตัวแปร เก็บสถานะการคลิกที่ปุ่ม
var tabmenu1 = null;

  $(".btn-success").click(function(){
    tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
tabmenu1 = true;

  });

  $('.nav-tabs a').on('shown.bs.tab', function (e) { // เมื่อแสดงข้อมูลในแท็บแล้ว

    if($(e.target).attr("href")=="#home"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("Home click");

      if(tabHome == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
	  
      }else{ // ยังไม่คลิก
        $("#home.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }

if($(e.target).attr("href")=="#menu1"){ // ถ้าเป็นของปุ่ม แรก
        //console.log("menu1 click");

      if(tabmenu1 == true){ // เมื่อมีกาารคลิกที่ปุ่ม success
	 
      }else{ // ยังไม่คลิก
        $("#menu1.tab-pane").removeClass("active in"); // ยังไม่แสดง
      }      
    }


  });  

$(".btn-success").click(function(){
  tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
tabmenu1 = true;

  if($("a[href='#home']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่

    $("#home.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
console.log("home click");

   tabmenu1 = null;

$( "#home" ).load(window.location.href + " #home"  );
  }

if($("a[href='#menu1']").parent("li").hasClass("active")){ // ก้าถูกซ่อนอยู่
    $("#menu1.tab-pane").addClass("active in"); // ให้แสดงข้อมูล
   tabHome = null;

$( "#menu1" ).load(window.location.href + " #menu1" );
  }
});



$(function(){
	
$("#overlay").fadeOut();
    $(".main-contain").removeClass("main-contain");
});
</script>

</body>
</html>

Golff Sinlapachai 16-03-2020 08:07:44

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

เป็นไอเดียคร่าวๆ

  $(".btn-success").click(function(){
      tabHome = true; // เปลี่ยนสถานะเมื่อคลิก
      tabmenu1 = true;
      $("#overlay").show().fadeOut("slow",function(){
        // ทำคำสั่งที่ต้งงการ
      });
  });

ninenik 16-03-2020

ความคิดเห็นที่ 2

ตรงเเถบโหลด ให้มันโหลดนานหน่อย เเก้ตรงไหนครับ

Golff Sinlapachai 16-03-2020 11:07

ความคิดเห็นที่ 3

ใส่เวลาเป็นตัวเลข แทนข้อความคำว่า slow เข้าไป เช่น 1 วินาที ก็ 1000 ค่าในหน่วย
มิลลิวินาที ค่ายิ่งมาก ก็จะแสดง animation นาน พยายามศึกษา การใช้งาน JQuery API เพิ่มเติม
ตัวอย่าง

.fadeOut( 1500, function()

ninenik 16-03-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน