google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Tạo một bộ bật/tắt đơn giản với JavaScript  

Ngày cập nhật 25/05/2010 Bạn chưa có lời bình trong mã này 0

1
lưu

Tạo một bộ bật/tắt đơn giản với JavaScript Bài viết này sẽ hướng dẫn bạn tạo một bộ mã có thể dễ dàng ẩn/hiển thị các đối tượng trên trang web một cách đơn giản nhất, thông qua các ID của đối tượng. Bài hướng dẫn khá chi tiết, vui lòng vào trang chi tiết để xem thêm.


Nhãn: bật, tắt, bộ mã, ẩn, hiển, đối tượng

Báo cho chúng tôi lỗi JavaScript này

Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

This is a quick tutorial to explain how you can easily show and hide page elements with javascript.

To begin with, each item that you want to hide/show should have a unique HTML ID. Let's begin with a very simple HTML page.

<h1>This is my title</h1>
<div id="content">
	<h2>Div1 Follows</h2>
	<div id="div1">
		This is where my first div will be.
	</div>
	<h2>Div2 Follows</h2>
	<div id="div2">
		This is where my second div will be.
	</div>
</div>

We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).

function hideAll() {
	var myDivs = Array('div1','div2') // Add each div ID to this array
	for(var i in myDivs) {
		if(document.getElementById(myDivs[i]) {
			document.getElementById(myDivs[i]).style.display = 'none';
		}
	}
}

That function, when called, will hide all of the divs that are included in the "myDivs" array. However, we need a way to show the appropriate divs again, so we are going to modify the function slightly to insert a new link where the div should be.

function hideAll() {
	var myDivs = Array('div1','div2') // Add each div ID to this array
	for(var i in myDivs) {
		if(document.getElementById(myDivs[i])) {
			document.getElementById(myDivs[i]).style.display = 'none';
			if(!document.getElementById('linkto_'+myDivs[i])) {
				var myLink = document.createElement('a');
				myLink.id = 'linkto_'+myDivs[i];
				myLink.href = '#'+myDivs[i];
				myLink.onclick = function() {
					showDiv(this.href);
					//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
					return true;
				};
				myLink.appendChild(document.createTextNode('Expand this entry'));
				document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
			}
		}
	}
}

Now that we've inserted links that will show the divs, we need to actually write the function that's going to reveal the div when the link is clicked.

function showDiv(what) {
	hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
	what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
	what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
	if(document.getElementById(what)) {
		document.getElementById(what).style.display = '';
		if(document.getElementById('linkto_'+what)) {
			document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
		}
	}
}

Now, we'll put these two functions together at the very bottom of our document (just above the closing body tag) and will then call the appropriate functions. I've also added a little bit of script that will check to see if someone loaded the page trying to access a specific div, and will show that div if so. Therefore, the entire body section of our HTML page will look like:

<body>
<h1>This is my title</h1>
<div id="content">
	<h2>Div1 Follows</h2>
	<div id="div1">
		This is where my first div will be.
	</div>
	<h2>Div2 Follows</h2>
	<div id="div2">
		This is where my second div will be.
	</div>
</div>
<script type="text/javascript">
function hideAll() {
	var myDivs = Array('div1','div2') // Add each div ID to this array
	for(var i in myDivs) {
		if(document.getElementById(myDivs[i])) {
			document.getElementById(myDivs[i]).style.display = 'none';
			if(!document.getElementById('linkto_'+myDivs[i])) {
				var myLink = document.createElement('a');
				myLink.id = 'linkto_'+myDivs[i];
				myLink.href = '#'+myDivs[i];
				myLink.onclick = function() {
					showDiv(this.href);
					//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
					return true;
				};
				myLink.appendChild(document.createTextNode('Expand this entry'));
				document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
			}
		}
	}
}
function showDiv(what) {
	hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
	what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
	what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
	if(document.getElementById(what)) {
		document.getElementById(what).style.display = '';
		if(document.getElementById('linkto_'+what)) {
			document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
		}
	}
}
hideAll();
if(window.location.hash) {
	showDiv(window.location.hash);
}
</script>
</body>
bởi Xem
Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa






B I U URL IMG QUOTE LEFT CENTER RIGHT CODE


iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!
javascriptbank.com javascripton.com gomy.mobi gomymobi.com Card.rip eChainBank.com ZWVQ.com ChatTotal.com ChainTutor.com ABP3.com war.money YeuNu.com CryptoKD.com pornID.net choose.works ApexBTC.com system.money CTRCoin.com CoinHolo.com choose.exchange this.bid CreditCard.rip XMQV.com index.services
  • Super Hot PHP scripts
Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:
25/05/2010
Curtiss [more]
18,618
0
4
0
10.8 KBytes
Tạo một bộ bật/tắt đơn giản với JavaScript - JID: 2366 - Ngôn ngữ: tiếng Việt 4.3/5 4 lượt đánh giá / 18,618 lượt xem / 0 lời bình 25/05/2010 ...Tạo một bộ bật/tắt đơn giản với JavaScript - JID: 2366 - Tạo một bộ bật/tắt đơn giản với JavaScript - Ngôn ngữ: tiếng Việt

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web