Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถามเรื่อง css tab ทีค่ะ อยากให้ลิงค์ภายใน tab ได้เลยค่ะ ต้องเขียนแก้ยังไงคะ

สอบถามเรื่อง css tab ทีค่ะ อยากให้ลิงค์ภายใน tab ได้เลยค่ะ ต้องเขียนแก้ยังไงคะ

เริ่มหัวข้อใหม่

Because Love You

โพสกระทู้ ( 435 )
บทความ ( 0 )

ลองเขียนแล้วตามนี้ค่ะ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs Test</title>
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>
</head>

<body>

<div class="tab">
                            <button class="tablinks" onClick="openCity(event, 'menu1')" id="defaultOpen">MENU1</button>
                            <button class="tablinks" onClick="openCity(event, 'menu2')">MENU 2 </button>
</div>
                            <div id="menu1" class="tabcontent">
                            CLICK to <a href="menu11.php">MENU 1.1</a>
                            </div>
                          <div id="menu2" class="tabcontent">
                               CLICK to <a href="menu21.php">MENU 2.1</a>
						  </div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

ปัญหาคือ พอคลิกที่ ลิงค์ที่เชื่อมต่อใน Tab แต่ละอัน มันจะไปข้างนอกเลยค่ะ ต้องการคลิกแล้ว แสดงอยู่ใน Tab นั้น ต้องเขียนแก้ยังไง ตรงไหนคะ รบกวนพี่ๆ ด้วยนะคะ

ขอบพระคุณมากค่ะ

Tag : PHP, HTML, CSS

Date : 2018-07-31 09:33:50

By : because

View : 1254

Reply : 4

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ลองดู tab ของ bootstrap ไหม เล่นง่ายกว่า

Date : 2018-07-31 12:13:15

By : apisitp

No. 2

Because Love You

โพสกระทู้ ( 435 )
บทความ ( 0 )

ใช้ Bootstrap Tab แล้วค่ะ แต่ก็ยังเปิดลิงค์ใหม่แทนใน tab

Date : 2018-07-31 22:03:21

By : because

No. 3

To Be Developer

โพสกระทู้ ( 1,994 )
บทความ ( 10 )

ใช้ AJAX ดึงข้อมูลมาแสดง แทนการ link ครับ

https://jsfiddle.net/waspinator/rw8ujfg3/

Date : 2018-07-31 22:32:44

By : {Cyberman}

No. 4

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

ถ้าโค๊ดมันทำงานได้ แต่แสดงผลไม่ถูกที่ถูกทาง นำภาพมาลงแสดงความต้องการด้วยครับ

ไม่ได้แก้โค๊ด error แต่เป็นการแก้ interface
คำอธิบายสั้นไปครับไม่ค่อยเข้าใจ

Date : 2018-08-01 06:47:31

By : Chaidhanan

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามเรื่อง css tab ทีค่ะ อยากให้ลิงค์ภายใน tab ได้เลยค่ะ ต้องเขียนแก้ยังไงคะ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก