Forgot Password ??

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

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถามปัญหา hide show div ที่คลิกแล้ว ก็ refresh ไปข้างบนตลอดเรยอ่ะ ช่วยด้วยนะ TT

สอบถามปัญหา hide show div ที่คลิกแล้ว ก็ refresh ไปข้างบนตลอดเรยอ่ะ ช่วยด้วยนะ TT

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

blackdevil

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

------------------------------------------------------------------------
div ข้างบนจะทำเป็น โลโก้
แล้วจะมีอีกสอง div ที่ show ให้เห็น คือ div class="show"
จะมีรูป อยู่ใน div class="show" เป็นรูป + ตั้งใจว่าถ้าให้คลิก + จะมี div class="slidingDiv" ที่ hide ไว้ show ออกมา
แล้ว รูป + จะเปลี่ยนเป็น - ถ้าอยากให้ div class="slidingDiv" hide ก็คลิกที่รูป - ก็จะ hide

**ปัญหาอยู่ที่ว่า เวลาคลิกที่รูป - หน้าเพจมันจะรีเฟรชไปข้างบนตลอดเรยอ่ะ อยากให้หน้าเพจ hide แล้วอยู่ที่จุดๆนั้นไปเรยอ่ะ ไม่อยากให้เด้งขึ้นข้างบนอ่ะ เพราะตั้งใจว่าจะทำ show หลายๆ div แต่ละ div ก็จะมี div ที่ hide ซ่อนไว้อยู่ทุก div เรยอ่ะ

code ประมาณนี้

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>Papermashup.com | Sliding Div</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style>

.slidingDiv {
	height:200px;
	width:960px;
	background-color:#eee;
	position:relative;
}

.show_hide {
	display:none;
}

.slidingDiv2 {
	height:200px;
	width:960px;
	background-color:#eee;
	position:relative;
}

.show_hide2 {
	display:none;
}
.show{
	width:960px; 
	height:200px;
	position:relative; 
	background-color:#CCC; 
	border-bottom:1px solid #666;
}
</style>


</head>

<body>
<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
	
	$(".slidingDiv").hide();
	$(".show_hide").show();
	
	$('.show_hide').click(function(){
		$(".slidingDiv").slideToggle();
		$('img.arrow').toggle();
	});
	
	$(".slidingDiv2").hide();
	$(".show_hide2").show();
	
	$('.show_hide2').click(function(){
		$(".slidingDiv2").slideToggle();
		$('img.arrow2').toggle();
	});
	

});

</script>

<div style="height:400px;border:1px solid #000; width:960px;"></div>
 
 <div class="show">
    <div style="width:12px; height:12px;  top:0; right:0; position:absolute">
        <a href="#" class="show_hide"><img class="arrow" width="12px" height="12px" src="down_icon.jpg"></a>
        <a href="#" class="show_hide"><img class="arrow" width="12px" height="12px" src="up_icon.jpg" style="display:none"></a>
    </div>
    
 </div>
 <div class="slidingDiv">
	<div style="width:12px; height:12px;  bottom:0; right:0; position:absolute">
        <a href="#" class="show_hide"><img class="arrow" width="12px" height="12px" src="up_icon.jpg" style="display:none"></a>
    </div>
    
 </div>


 <div class="show">
    <div style="width:12px; height:12px;  top:0; right:0; position:absolute">
        <a href="#" class="show_hide2"><img class="arrow2" width="12px" height="12px" src="down_icon.jpg"></a>
        <a href="#" class="show_hide2"><img class="arrow2" width="12px" height="12px" src="up_icon.jpg" style="display:none"></a>
    </div>
    
 </div>
 <div class="slidingDiv2">
	<div style="width:12px; height:12px;  bottom:0; right:0; position:absolute">
        <a href="#" class="show_hide2"><img class="arrow2" width="12px" height="12px" src="up_icon.jpg" style="display:none"></a>
    </div>
    
 </div>


</body>
</html>

Tag : JavaScript, jQuery

Date : 2013-07-07 01:37:47

By : blackdevil

View : 975

Reply : 2

No. 1

phpbasic

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

ตรง link ให้กำหนด href="#" เป็นแบบ href="javascript:void(0);" ดูครับ

Date : 2013-07-08 00:45:26

By : somparn

No. 2

blackdevil

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

ได้แล้วววว ^^ ขอบพระคุณมากๆๆๆๆนะ อิอิ

Date : 2013-07-08 09:21:40

By : blackdevil

ค้นหาข้อมูล

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

Re : สอบถามปัญหา hide show div ที่คลิกแล้ว ก็ refresh ไปข้างบนตลอดเรยอ่ะ ช่วยด้วยนะ TT

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00