ขอคำเเนะนำหน่อยครับ กดปุ่มเเล้วเเสดงข้อมูลในหน้าเดียว

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

ขอคำเเนะนำหน่อยครับ กดปุ่มเเล้วเเสดงข้อมูลในหน้าเดียว
มีอยู่ 3 ปุ่ม เเต่ละปุ่มเเสดงรูป  ชื่อ  เปอร์เซ็น  3อย่าง  เเละเเต่ละปุ่มเเสดงข้อมูลไม่เท่ากัน ปุ่ม1มี10ข้อมูล ปุ่ม2มี15ข้อมูล
เราจะทำให้  รูป  ชื่อ  เปอร์เซ็น มีระยะห่างยังไงครับ เเละ การเเสดงข้อมูลมีวิธีอื่นนอกจากที่ผมลองทำไหมครับ


<?php
include 'controller/configdatabase.php';

?>
<!DOCTYPE html>

<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>Button Outline</h2>

    <button type="button"  class="btn btn-outline-success" onclick="showImage1()" >One</button>
    <button type="button"  class="btn btn-outline-success" onclick="showImage2()" >Two</button>
    <button type="button"  class="btn btn-outline-success" onclick="showImage3()" >Three</button>
  </div>

  <!-- แสดงรูปภาพในนี้ -->
  <div id="show1" ></div>
  <div id="show2"></div>
  <div id="show3"></div>

  <script>
    var r ='test';
    var e ='100%';
    function showImage1() {
      document.getElementById("show1").innerHTML = '<img src=img/number1.png  />'+ r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number1.png  />';
      document.getElementById("show3").innerHTML = '<img src=img/number1.png />';

    }

    function showImage2() {
      document.getElementById("show1").innerHTML = '<img src=img/number2.png  /> ' + r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number2.png  />'
      document.getElementById("show3").innerHTML = ''

    }

    function showImage3() {
      document.getElementById("show1").innerHTML = '<img src=img/number3.png  /> ' + r + e;
      document.getElementById("show2").innerHTML = '<img src=img/number3.png  />'
      document.getElementById("show3").innerHTML = '<img src=img/number3.png  />'
      

    }
  </script>
  <?php 

  ?>
</body>
</html>


Golff Sinlapachai 171.4.236.xxx 06-03-2020 18:03:59

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

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


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


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







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ