แบบนี้ป่าว
1. ซ่อนส่วนที่ต้องการก่อนด้วย css
p{display: none;}
2.ลองดูตรงโค๊ดตรงนี้ $('#p'
มันมีบวกด้วยnum).show(); << อ่อ Thaiseoboard ไม่แสดงบวก
<!DOCTYPE html>
<html>
<head>
<style>
p{display: none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var num=$(this).attr('rel');
$('p').each(function(){
$(this).hide();
});
$('#p'num).show(); //อย่าลืมใส่บวก
});
});
</script>
</head>
<body>
<p id="p1">Show Detaill 1</p>
<button rel="1">Click #1</button><br>
<p id="p2">Show Detaill 2</p>
<button rel="2">Click #2</button><br>
<p id="p3">Show Detaill 3</p>
<button rel="3">Click #3</button><br>
<p id="p4">Show Detaill 1</p>
<button rel="4">Click #4</button>
</body>
</html>
พัฒนาเว็บไซต์
