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,027

HOME > PHP > PHP Forum > ทำเมนูแล้วต้องการให้ class active ใน <li> เปลี่ยนไปตามเมนูที่กดครับ



 

ทำเมนูแล้วต้องการให้ class active ใน <li> เปลี่ยนไปตามเมนูที่กดครับ

 



Topic : 111766



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



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




ผมใช้ index.php เป็นหน้าหลักครับ จะมีเค้าโครงของเว็บอยู่ ส่วนตรงกลางจะเป็นช่องตารางว่างๆให้ข้อมูลจากไฟล์อื่น เช่น home.php contact.php มาแสดงผลครับ ซึ่งผมใช้ Ajax responseText ในการนำไฟล์ home.php contact.php มาแสดงผลครับ

Code Ajax ที่ใช้ครับ (JavaScript)
var HttPRequest = false;
	
	function pageload(url) {
		HttPRequest = false;
		if (window.XMLHttpRequest) {
			HttPRequest = new XMLHttpRequest();
			if (HttPRequest.overrideMimeType) {
				HttPRequest.overrideMimeType('text/html');
			}
		}
		else if (window.ActiveXObject) {
			try {
				HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) {}
			}
		}
		
		if (!HttPRequest) {
			alert('Cannot create XMLHTTP instance');
			return false;
		}
		
		var pmeters = "";
		
			HttPRequest.open('POST',url,true);
			
			HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			HttPRequest.setRequestHeader("Content-length", pmeters.length);
			HttPRequest.setRequestHeader("Connection", "close");
			HttPRequest.send(pmeters);
			
			HttPRequest.onreadystatechange = function() {
				if(HttPRequest.readyState == 3) {
					document.getElementById("mySpan").innerHTML = "Now is Loading...";
				}
				
				if(HttPRequest.readyState == 4) {
					document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
				}
			}
			
	}


ซึ่งในเมนูเอง ผมใช้ฟังชั่น JavaScript:pageload(url) เป็นลิ้งค์ครับ

Code ของเมนู
<ul class="nav navbar-nav">
          <li><a href="JavaScript:pageload('home.php');"><i class="glyphicon glyphicon-home"></i> หน้าแรก</a></li>
          <li><a href="JavaScript:pageload('shop.php');"><i class="glyphicon glyphicon-shopping-cart"></i> ร้านค้า</a></li>
          <li><a href="JavaScript:pageload('contact.php');"><i class="glyphicon glyphicon-earphone"></i> ติดต่อ</a></li>
        </ul>
        <ul class="nav navbar-right navbar-nav">
          <li><a href="JavaScript:pageload('login.php');"><i class="glyphicon glyphicon-log-in"></i> เข้าสู่ระบบ/สมัครสมาชิก</a></li>
        </ul>


แต่ผมต้องการให้เวลาผมกดเมนูใดเมนูหนึ่ง ใน <li> แล้วเมนูนั้นจะมี class active ขึ้นครับ
เช่น ผมกดเมนู Home ก็ให้ <li> เป็น <li class="active"> ครับ แล้วพอผมต้องการจะไปเมนู Shop ผมต้องการให้ class active หายไปจาก <li> ของเมนู Home แล้วไปอยู่ใน <li> ของ Shop ครับ กล่าวง่ายๆก็คือ พอกดเมนูใหม่แล้ว active จะหายไปจากเมนูเดิม เป็นอย่างนี้ไปเรื่อยๆครับ

ขอวิธีทำหรือแนวทางหน่อยนะครับ

ขออภัยหากเขียนให้เข้าใจยากครับ ผมเพิ่งตั้งกระทู้นี้เป็นกระทู้แรก



Tag : PHP, HTML/CSS, JavaScript, Ajax






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-10-06 15:45:22 By : Earth180TH View : 7567 Reply : 10
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ถ้าใช้ Ajax load page มาแสดง ลองกำหนด ID หรือ class ให้กับเมนูก่อนครับ เช่น

<li id="menu1">menu1</li>
<li id="menu2">menu2</li>
<li id="menu3">menu3</li>

เมื่อ Event Click เกิดที่ไหนก็ set attribute class ให้เป็น active ครับ ใน function page load อาจจะต้องเพิ่ม

function pageload(url,menu_id) เพิ่มพารามิเตอร์ menu_id

document.getElementById(menu_id).className = "active"; //กำหนด class active

หรือ

var el = document.getElementById(menu_id);
el.setAttribute('class','active');


การใช้งาน

<li onclick="JavaScript:pageload('home.php','menu1');" id="menu1"><i class="glyphicon glyphicon-home"></i> หน้าแรก</li>
<li onclick="JavaScript:pageload('shop.php','menu2');" id="menu2"><i class="glyphicon glyphicon-shopping-cart"></i> ร้านค้า</li>
<li onclick="JavaScript:pageload('contact.php','menu3');" id="menu3"><i class="glyphicon glyphicon-earphone"></i> ติดต่อ</li>


ลองดูนะครับ ได้ไม่ได้ยังไงถามได้ครับ





แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 16:43:49 By : Manussawin
 


 

No. 2



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



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


ตอบความคิดเห็นที่ : 1 เขียนโดย : Manussawin เมื่อวันที่ 2014-10-06 16:43:49
รายละเอียดของการตอบ ::
สามารถทำให้มัน active ได้แล้วครับ ขอบคุณมากครับ
ที่เหลือแค่ทำให้เวลาเราไปกดเมนูอันใหม่ active ในเมนูเก่าหายไป
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 17:14:38 By : Earth180TH
 

 

No. 3



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



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


$('li').removeClass('classActive')
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 19:10:00 By : gaowteen
 


 

No. 4



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



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


ตอบความคิดเห็นที่ : 3 เขียนโดย : gaowteen เมื่อวันที่ 2014-10-06 19:10:00
รายละเอียดของการตอบ ::
ผมลองทำเป็นแบบ jQuery แล้วครับ
แต่ก็ไม่ได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 19:48:39 By : Earth180TH
 


 

No. 5



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



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


ขอดูหน่อยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 20:38:20 By : gaowteen
 


 

No. 6



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



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


ตอบความคิดเห็นที่ : 5 เขียนโดย : gaowteen เมื่อวันที่ 2014-10-06 20:38:20
รายละเอียดของการตอบ ::


Code (JavaScript)
$(document).ready(function(){
	$('li').click(function(){
		$('li').removeClass('active');
		$(this).addClass('active');
	});
});

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 20:43:40 By : Earth180TH
 


 

No. 7



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



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


ทั้งหมด อะ ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 21:11:53 By : gaowteen
 


 

No. 8



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



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


Code (PHP)
<script language="JavaScript">
	var HttPRequest = false;
	
	function pageload(url,menu_id) {
		HttPRequest = false;
		if (window.XMLHttpRequest) {
			HttPRequest = new XMLHttpRequest();
			if (HttPRequest.overrideMimeType) {
				HttPRequest.overrideMimeType('text/html');
			}
		}
		else if (window.ActiveXObject) {
			try {
				HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) {}
			}
		}
		
		if (!HttPRequest) {
			alert('Cannot create XMLHTTP instance');
			return false;
		}
		
		var pmeters = "";
		
			HttPRequest.open('POST',url,true);
			
			HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			HttPRequest.setRequestHeader("Content-length", pmeters.length);
			HttPRequest.setRequestHeader("Connection", "close");
			HttPRequest.send(pmeters);
			
			HttPRequest.onreadystatechange = function() {
				if(HttPRequest.readyState == 3) {
					document.getElementById("mySpan").innerHTML = "Now is Loading...";
				}
				
				if(HttPRequest.readyState == 4) {
					document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
				}
			}
	}
	
$(document).ready(function(){
	$('li').click(function(){
		$('li').removeClass('active');
		$(this).addClass('active');
	});
});
</script>
</head>

<body onLoad="JavaScript:pageload('home.php');">
<header>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-collapse"> <span class="sr-only">Click เพื่อเลื่อน!</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a href="JavaScript:pageload('home.php');" class="navbar-brand">TESTTTT</a> </div>
      <div class="collapse navbar-collapse" id="mynavbar-collapse">
        <ul class="nav navbar-nav">
          <li class="menu"><a href="JavaScript:pageload('home.php')"><i class="glyphicon glyphicon-home"></i> หน้าแรก</a></li>
          <li class="menu"><a href="JavaScript:pageload('shop.php');"><i class="glyphicon glyphicon-shopping-cart"></i> ร้านค้า</a></li>
          <li class="menu"><a href="JavaScript:pageload('contact.php');"><i class="glyphicon glyphicon-earphone"></i> ติดต่อ</a></li>
        </ul>
        <ul class="nav navbar-right navbar-nav">
          <li><a href="login.php"><i class="glyphicon glyphicon-log-in"></i> เข้าสู่ระบบ/สมัครสมาชิก</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 21:14:26 By : Earth180TH
 


 

No. 9



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



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


ใช้ jquery ajax นะ ส่วน ajax ดั่งเดิมไม่ถนัด
Code (PHP)
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script language="JavaScript">
	var HttPRequest = false;
	
	function pageload(url,menu_id) {
		$('#mySpan').html("Now is Loading...");
		$.get(url,{'menu_id':menu_id},function(data){
			$('#mySpan').html(data)
			
		})
	}
	
$(document).ready(function(){
	$('a').click(function(){
		$('a').removeClass('active');
		$(this).addClass('active');
	});
});

</script>
<style>
	.active{
		color:#F90;
		transition:0.2s 0.2s;
	}
</style>
</head>

<body onLoad="JavaScript:pageload('home.php');">

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-collapse"> <span class="sr-only">Click เพื่อเลื่อน!</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a href="JavaScript:pageload('home.php');" class="navbar-brand">TESTTTT</a> </div>
      <div class="collapse navbar-collapse" id="mynavbar-collapse">
        <ul class="nav navbar-nav">
          <li class="menu"><a href="JavaScript:pageload('home.php')"><i class="glyphicon glyphicon-home"></i> หน้าแรก</a></li>
          <li class="menu"><a href="JavaScript:pageload('shop.php');"><i class="glyphicon glyphicon-shopping-cart"></i> ร้านค้า</a></li>
          <li class="menu"><a href="JavaScript:pageload('contact.php');"><i class="glyphicon glyphicon-earphone"></i> ติดต่อ</a></li>
        </ul>
        <ul class="nav navbar-right navbar-nav">
          <li><a href="login.php"><i class="glyphicon glyphicon-log-in"></i> เข้าสู่ระบบ/สมัครสมาชิก</a></li>
        </ul>
      </div>
    </div>
  </nav>
<div id="mySpan"></div>



ประวัติการแก้ไข
2014-10-06 21:39:45
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 21:38:14 By : gaowteen
 


 

No. 10



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



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


ตอบความคิดเห็นที่ : 9 เขียนโดย : gaowteen เมื่อวันที่ 2014-10-06 21:38:14
รายละเอียดของการตอบ ::
ขอบคุณมากๆครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-06 21:48:14 By : Earth180TH
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ทำเมนูแล้วต้องการให้ class active ใน <li> เปลี่ยนไปตามเมนูที่กดครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 05
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 อัตราราคา คลิกที่นี่