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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!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 เพิ่มเติม
ตัวอย่าง

1	`.fadeOut( 1500,` `function()`

ninenik 16-03-2020

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

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

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