Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > Client Script Forum > สอบถามการใช้ JavaScript ในการแทนที่ข้อความ menu หน่อยครับ



 

สอบถามการใช้ JavaScript ในการแทนที่ข้อความ menu หน่อยครับ

 



Topic : 111284



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



สถานะออฟไลน์




พอดีผมจะทำ Menu ที่คลิกที่ ข้อความบน Menu แล้วมัน สลับข้อความและลิงค์อะครับ

คือตอนนี้ผมทำให้ซ่อนได้ แต่อยากให้มัน คลิกที่ปุ่มอื่นแล้วมัน ซ่อนอันที่แสดงอยู่ไป แล้วแสดงอันที่เราคลิกที่ปุ่มแทน

เช่น
ผมแยก div ซ้าย กับ div ขวา
คลิกปุ่ม 1 ก็แสดง ข้อความที่ 1 ซ่อนข้อความที่ 2 และ 3
คลิกปุ่ม 2 ก็แสดง ข้อความที่ 1 และซ่อนข้อความที่ 2 และ 3 เหมือนเดิมแต่ว่า
คลิกปุ่ม 3 ให้ซ่อน ข้อความที่ 1 แล้วแสดง ข้อความที่ 2 ขึ้นมาแทน แต่ยังซ่อนข้อความที่ 3
คลิกปุ่ม 4 ให้ซ่อน ข้อความที่ 1 และ ข้อความที่ 2 ให้แสดงข้อความที่ 3 แทนอะครับ

ทั้งหมดผมเขียนเป็นไฟล์ JS อะครับ เพราะผมทำเป็น Widget


Code (JavaScript)
<div class="right">
<spen id="sub_main" style="display:block">
ข้อความที่ 1
</spen>
<spen id="sub_content_sub" style="display:none">
ข้อความที่ 2
</spen>
<spen id="sub_content_sub2" style="display:none">
ข้อความที่ 3
</spen>

</div>
<div class="left>
<a href="javascript:tab(main);" id="main">ปุ่ม 1</a>
<a href="javascript:tab(main);" id="main">ปุ่ม 2</a>
<a href="javascript:tab(main,sub);" id="sub1">ปุ่ม 3</a>
<a href="javascript:tab(main,sub2);" id="sub2">ปุ่ม 4</a>
</div>

function tab(main,sub){
	$("#sub_main").show();
	$("#sub_content_"+sub).hide();
}




Tag : JavaScript, Ajax, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-09-12 22:06:28 By : topman View : 1791 Reply : 11
 

 

No. 1



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



สถานะออฟไลน์


Code (JavaScript)
<div class="left>
<a href="javascript:tab('sub_main');" >ปุ่ม 1</a>
<a href="javascript:tab('sub_main');" >ปุ่ม 2</a>
<a href="javascript:tab('sub_content_sub');" >ปุ่ม 3</a>
<a href="javascript:tab('sub_content_sub2');" >ปุ่ม 4</a>
</div>
<script language='javascript'>

var default_show=sub_main'';

function tab(sub_show){
	$('#'+sub_show ).show();
	$('#'+default_show).hide();
	default_show = sub_show;
}
</script>






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 06:08:59 By : Chaidhanan
 


 

No. 2



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



สถานะออฟไลน์


ทำไม ผมใช้งานไม่ได้อะครับ T_T แก้ไขเป็น

Code (JavaScript)

ตอนเรียกค่าผมก็ใช้ 

<a href="javascript:tab('sub_main');" >ปุ่ม 1</a>
<a href="javascript:tab('sub_main');" >ปุ่ม 2</a>
<a href="javascript:tab('sub_content_sub');" >ปุ่ม 3</a>
<a href="javascript:tab('sub_content_sub2');" >ปุ่ม 4</a>

var default_show='sub_main';

function tab(sub_show){
	$('#'+sub_show ).show();
	$('#'+default_show).hide();
	default_show = sub_show;
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 08:07:06 By : topman
 

 

No. 3



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



สถานะออฟไลน์


<script src="/js/jquery-1.10.2.js"></script> บันทัดนี้ได้มีใน code หรือเปล่าครับ
ปล. อาจเป็นเวอร์ชั่นอื่นก็ได้
ปล. 2 <spen> ไม่เคยเห็นนะครับ เห็นแต่ <span>

Code (JavaScript)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/js/jquery-1.10.2.js"></script>
</head>
<body>
<div class="right">
	<span id="sub_main" style="display:block">ข้อความที่ 1</span>
	<span id="sub_content_sub" style="display:none">ข้อความที่ 2</span>
	<span id="sub_content_sub2" style="display:none">ข้อความที่ 3</span>
</div>

<div class="left">
	<a href="javascript: tab('sub_main');" >ปุ่ม 1</a><br>
	<a href="javascript: tab('sub_main');" >ปุ่ม 2</a><br>
	<a href="javascript: tab('sub_content_sub');" >ปุ่ม 3</a><br>
	<a href="javascript: tab('sub_content_sub2');" >ปุ่ม 4</a>
</div>

<script language='javascript'>
var default_show='sub_main';
function tab(sub_show){
	if(sub_show !=default_show){
		$('#'+sub_show ).show();
		$('#'+default_show).hide();
		default_show = sub_show;
	}
}
</script>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 11:08:21 By : Chaidhanan
 


 

No. 4



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



สถานะออฟไลน์


ผมก็ใส่พวก script jquery แล้วนะครับ

ผมพิมพ์ผิดเฉยๆครับ อันนี้ผมไม่ได้ก๊อปจากหน้า Code มา ผมมาพิมพ์เอง ^_^

เกี่ยวกับตรง

javascript: tab('sub_main');

หรือป่าวครับ ผมใช้แค่ javascript: tab(sub_main); มันจะเกี่ยวหรือป่าวอะครับ

พอดีผมทำเป็น widget อะครับ ส่งค่าจาก

$html = '
<a href="javascript: tab(sub_main);" >ปุ่ม 1</a><br>
<a href="javascript: tab(sub_main);" >ปุ่ม 2</a><br>
<a href="javascript: tab(sub_content_sub);" >ปุ่ม 3</a><br>
<a href="javascript: tab(sub_content_sub2);" >ปุ่ม 4</a>'
;

ประมาณนี้อะครับ

ผมไม่แน่ใจว่ามันจะเกี่ยวหรือป่าวอะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 13:29:36 By : topman
 


 

No. 5



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



สถานะออฟไลน์


ผมลอง alert(sub_show);

มันขึ้นข้อความนี้อะครับ "Object HTMLDivElement"

กำลังหาวิธีอยู๋อะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 13:54:07 By : topman
 


 

No. 6



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



สถานะออฟไลน์


ได้ล่ะครับ ผมกำหนด

var sub_content_sub = 'sub_content_sub';
var sub_content_sub2 = 'sub_content_sub2';
var sub_main = 'sub_main';

ให้มันเพิ่มขึ้นไปอะครับ

แต่มันติดปัญหาที่เวลาคลิกที่ sub_main ที่เหมือนกัน มันจะหายไปอะครับ

ผมจะต้องเขียนเงื่อนไขเช็คยังไงดีหรอครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 13:57:49 By : topman
 


 

No. 7



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



สถานะออฟไลน์


ตอนเรียกใช้ ก็แค่ใส่ single quote ครอบ ถ้าไม่ใส่ จาวาก็มองเห็นเป็นตัวแปร ไม่ได้มองเห็นเป็น constant
อ่านโค๊ดที่ผมเขียนให้อีกทีครับ ผมลองทำงานแล้ว และป้องกัน ออปเจคซ้ำไว้แล้ว

สำหรับโค๊ดนี้ ไม่มี singlequote ครอบ
$html = '
<a href="javascript: tab(sub_main);" >ปุ่ม 1</a><br>
<a href="javascript: tab(sub_main);" >ปุ่ม 2</a><br>
<a href="javascript: tab(sub_content_sub);" >ปุ่ม 3</a><br>
<a href="javascript: tab(sub_content_sub2);" >ปุ่ม 4</a>';

แก้เป็น
$html = '
<a href="javascript: tab(\'sub_main\');" >ปุ่ม 1</a><br>
<a href="javascript: tab(\'sub_main\');" >ปุ่ม 2</a><br>
<a href="javascript: tab(\'sub_content_sub\');" >ปุ่ม 3</a><br>
<a href="javascript: tab(\'sub_content_sub\');" >ปุ่ม 4</a>';


ประวัติการแก้ไข
2014-09-13 15:16:09
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-13 15:10:10 By : Chaidhanan
 


 

No. 8



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



สถานะออฟไลน์


อ๋อ ได้ล่ะครับ ผม ลืมใส่ if ให้มัน ^_^ ขอบคุณมากๆเลยนะครับ สำหรับการช่วยเหลือ ^_^

ผมขอถามอีกข้อนะครับผมมี div nav_top ที่แบบว่าเวลา scroll ก็จะเปิดอีก div ที่เป็น nav_top ขึ้นมา เพราะเมนู ส่วนบนเว็บ จะมีขนาดใหญ่ แต่เวลา scroll ลงมา ผมจะให้ menu ย่อ ที่เป็น nav_top สุดของมันลงมา เพราะมันจะอันเล็กและให้มัน fix อยู่ด้านบนตลอดอะครับ

แต่ค่า id มันซ้ำกัน พอจะมีวิธีแก้ไข ไหมอะครับ เพราะผมรับค่า $html=data มาจากข้อมูลเดียวกันอะครับ

ผมสามารถเปลี่ยน menu หลัก ผมใช้ id="sub_main" และส่วนของ nav_top ผมสามารถใช้แบบไหนได้บ้างครับ name ได้ไหมครับ ถ้าเปลี่ยนได้ Code ผมต้องแก้ไข ยังไงได้บ้างอะครับ

ขอบคุณมากๆนะครับ สำหรับคำตอบ พอดี ระบบมันค่อนข้างยุ่งยากอะครับ T_T ขอโทษที่รบกวนเยอะนะครับผม


ประวัติการแก้ไข
2014-09-14 09:16:06
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-14 08:23:44 By : topman
 


 

No. 9



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



สถานะออฟไลน์


id ไม่ควรซ้ำกันครับ เพราะเวลาทำงาน มันจะอ้าง id แรกเสมอ
ก็สามารถใช้ คลาสแทน ได้ครับ หรือเราจะกำหนด attibute ขึ้นมาเอง เพื่อใช้งานด้วยก็ได้ครับ


Code (JavaScript)
<div id="div_1" class='nav_top' myattr='test1' ></div>
<div id="div_2" class='nav_top' myattr='test2' ></div>

<script language="javascript">
$('.nav_top').on('mouseover', '', '', function(e){
  var id=$(this).attr('id');
  switch(id){
  case 'div_1': do_for_1(); break;
  case 'div_2': do_for_2(); break;
  }
});

//หรือจะอ้างจาก myattr ด้วยก็ได้
$('.nav_top [myattr=test1]').on('mouseover', '', '', function(e){
  alert($(this).attr('myattr'));
});

</script>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-14 10:08:57 By : Chaidhanan
 


 

No. 10



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



สถานะออฟไลน์


งงนิดหน่อยอะครับ คือ code ผม เป็นแบบว่า

Code
<div class="main_menu">
ข้อมูลที่ 1
</div>
<div class="nav_top" style="display:none" อันนี้ผม fix อยู่ด้านบนตลอด แต่ซ่อนเอาไว้ก่อนอะครับ>
ข้อมูลที่ 1
</div>


เวลาอยู่ด้านบน จะแสดง main_menu แต่พอ scroll ลงมาเกิน main_menu ผมจะดึง nav_top มาแสดงผล โดยข้อมูลจะเป็นข้อมูลชุดเดียวกันที่ ก๊อปกันออกมาวางเลยอะครับ

แต่ที่นี่เวลาผมใช้

Code (JavaScript)
function tab(sub_show){
	if(sub_show !=default_show){
		$('#'+sub_show ).show();
		$('#'+default_show).hide();
		default_show = sub_show;
	}
}


มันจะทำงานในส่วนของ main_menu แต่มันจะไม่ทำงาน ที่ส่วนของ nav_top ด้วยอะครับ ผมจะทำยังไงให้ เวลา ผมเลื่อน scroll ลงมาแล้ว nav_top มันทำงานตัว function tab ด้วยอะครับ ตอนนี้เหมือนกดไปมันไปเปลี่ยนแต่ใน main_menu อย่างเดียวอะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-14 12:28:32 By : topman
 


 

No. 11



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



สถานะออฟไลน์


ได้ล่ะครับผม ใช้วิธีง่ายๆ คือกำหนด เป็น class แทน ^_^

Code (JavaScript)
function tab(sub_show){
	if(sub_show !=default_show){
		$('#'+sub_show ).show();
		$('.'+sub_show ).show();
		$('#'+default_show).hide();
		$('.'+default_show).hide();
		default_show = sub_show;
	}
}


แต่ไม่รู้ว่ามันจะ ดีหรือป่าว แต่มันก็ใช้งานได้ครับ

ขอบคุณมากๆเลยนะครับผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-14 12:32:09 By : topman
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : สอบถามการใช้ JavaScript ในการแทนที่ข้อความ menu หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







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

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่