Forgot Password ??

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

	Registered : 109,030

HOME > PHP > PHP Forum > มีปัญหา เรื่อง jquery ครับ กดเปลี่ยน Tab แล้วการแสดงผลผิดพลาดครับ

มีปัญหา เรื่อง jquery ครับ กดเปลี่ยน Tab แล้วการแสดงผลผิดพลาดครับ

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

kenghockey

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

มีปัญหา เรื่อง jquery ครับ กดเปลี่ยน Tab แล้วการแสดงผลผิดพลาดครับ

123

Code (PHP)

$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
});

Code (PHP)

<div class="nav_tabs">
            <ul class="tabs"> 
                <li class="active" rel="tab1">สรุปรวมข่าวประชาสัมพันธ์</li>
                <li rel="tab2">กิจกรรมที่น่าสนใจ</li>
                <li rel="tab3">ข่าวประชาสัมพันธ์</li>
            </ul>
        </div>
        <div class="tab_container">
        	<div id="tab1" class="tab_content">
            <?php
			while($result = mysql_fetch_array($sql)){
				
				$date_time = format_date($result['nw_datetime']);
			?>
				<div class="news_box">
					<div class="news_top">
						<a href="<?= $local_web; ?>/page.php?nw_id=<?php echo $result['nw_id']; ?>">
						<span><?php echo $result['nw_title']; ?></span>
						<img itemprop="image" src="image/<?php echo $result['nw_img']; ?>" border="0"/>
						</a>
					</div>
					<div class="news_center">
						<b>หมวด : <span style="color:#d3222a; font-weight:bold;"><?php echo $result['nw_type']; ?></span></b>
						<time pubdate="pubdate" title="วันที่โพส"><?php echo $date_time; ?></time>
						<p><?php echo substr($result['nw_desc'],0,215)."...<a href=\"page.php?nw_id=".$result['nw_id']."\" class=\"news\"><img src=\"skin/more-01.png\" width=\"23\" height=\"15\"></a>"; ?></p>
					</div>
				</div>
			<?php
			}
			?>
            </div>
            <div id="tab2" class="tab_content"> 
			<?php
			while($result_act = mysql_fetch_array($sql_2)){
				
				$date_time = format_date($result_act['nw_datetime']);
			?>
				<div class="news_box">
					<div class="news_top">
						<a href="<?= $local_web; ?>/page.php?nw_id=<?php echo $result_act['nw_id']; ?>">
						<span><?php echo $result_act['nw_title']; ?></span>
						<img itemprop="image" src="image/<?php echo $result_act['nw_img']; ?>" border="0"/>
						</a>
					</div>
					<div class="news_center">
						<b>หมวด : <span style="color:#d3222a; font-weight:bold;"><?php echo $result_act['nw_type']; ?></span></b>
						<time pubdate="pubdate" title="วันที่โพส"><?php echo $date_time; ?></time>
						<p><?php echo substr($result_act['nw_desc'],0,215)."...<a href=\"page.php?nw_id=".$result_act['nw_id']."\" class=\"news\"><img src=\"skin/more-01.png\" width=\"23\" height=\"15\"></a>"; ?></p>
					</div>
				</div>
			<?php
			}
			?>
            </div><!-- #tab2 -->
            <div id="tab3" class="tab_content">
            <?php
			while($result_act = mysql_fetch_array($sql_3)){
				
				$date_time = format_date($result_act['nw_datetime']);
			?>
				<div class="news_box">
					<div class="news_top">
						<a href="<?= $local_web; ?>/page.php?nw_id=<?php echo $result_act['nw_id']; ?>">
						<span><?php echo $result_act['nw_title']; ?></span>
						<img itemprop="image" src="image/<?php echo $result_act['nw_img']; ?>" border="0"/>
						</a>
					</div>
					<div class="news_center">
						<b>หมวด : <span style="color:#d3222a; font-weight:bold;"><?php echo $result_act['nw_type']; ?></span></b>
						<time pubdate="pubdate" title="วันที่โพส"><?php echo $date_time; ?></time>
						<p><?php echo substr($result_act['nw_desc'],0,215)."...<a href=\"page.php?nw_id=".$result_act['nw_id']."\" class=\"news\"><img src=\"skin/more-01.png\" width=\"23\" height=\"15\"></a>"; ?></p>
					</div>
				</div>
			<?php
			}
			?>
            </div><!-- #tab3 -->
        </div>
        <div class="clear"></div>
    </div>

Tag : PHP, HTML/CSS, jQuery, CakePHP

ประวัติการแก้ไข
2013-03-20 14:43:28

Date : 2013-03-20 14:41:51

By : kenghockey

View : 893

Reply : 7

No. 1

LittleLovely

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

ประวัติการแก้ไข
2013-03-20 17:29:14

Date : 2013-03-20 17:28:37

By : survivor

No. 2

Unidentifier

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

Quote:
เท่าที่ไล่โค้ดดูน่าจะปกติดีน่ะครับ ไม่เห็นมีอะไรที่ผิดสังเกตอยู่เลย
เพราะหลักใหญ่ใจความน่าจะให้ช่วยดูเรื่อง jquery+css ใช่มั๊ย??

Date : 2013-03-20 17:29:40

By : sakuraei

No. 3

kenghockey

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

ใช่ครับ คือตอนนี้มันจะทำงานบน ie9 แต่มีปัญหากับ ie8 อย่างเดี๋ยวครับ
ผมลอง เปลี่ยนมาใช่ .tabify() แทนโค้ดชุดนี้มันก็จะใช้งานได้ครับ แต่มันรับค่าจากลิ้งเวลากด มันจะเหมือน รีดฟรชเพจใหม่
คือตอนนี้ที่ต้องการอยากจให้มัน fade เวลากดแท๊บอื่นๆ แล้วไม่รีเฟรชเพจครับ

ประวัติการแก้ไข
2013-03-20 18:29:40
2013-03-20 18:29:48
2013-03-20 18:29:58
2013-03-20 18:30:07

Date : 2013-03-20 18:28:16

By : kenghockey

No. 4

Unidentifier

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

Code

$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn("slow",function(){$(this).show()}); //ลองเรียกใช้ callback function ดูครับ
});
});

Date : 2013-03-20 21:14:23

By : sakuraei

No. 5

kenghockey

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

ยังแสดงผลผิดพลาด เหมือนเดิมเลยครับ เหมือนรูปข้างบนอยู่เลยครับ (กรณีกด แท๊บเพื่อเปลี่ยนเมนูนะครับ ถึงจะเป็น)

Date : 2013-03-21 08:47:25

By : kenghockey

No. 6

Unidentifier

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

ถ้าอย่างนั้นก็กำหนด CSSครับ

$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).css({"position":"absolute" ,"z-index":"999", "top":"50px" , "left":"10px"}).fadeIn();
});
});

Date : 2013-03-21 11:20:13

By : sakuraei

No. 7

kenghockey

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

ถ้ากำหนดcss float:left ใช้ได้เลยครับ ขอบคุณครับ

Date : 2013-03-21 19:00:45

By : kenghockey

ค้นหาข้อมูล

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

Re : มีปัญหา เรื่อง jquery ครับ กดเปลี่ยน Tab แล้วการแสดงผลผิดพลาดครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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