隱藏和顯示Div而不使用Jquery
[英]Hide and Show Divs without using Jquery
問題描述
我想問一下是否有可能修改我的代碼以實現與當前使用jquery相同的目標。 我將這段代碼嵌入到sharepoint中，而我們公司使在其中添加jquery變得很復雜。 這是代碼...
<html>
<head>
<style>
a,img { border: none; }
.comb {display: none;}
</style>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
</head>
<body>
<map name="FPMap0" id="FPMap0">
<area item="first" href="#" shape="polygon" coords="347, 79, 349, 201, 449, 248, 540, 204, 541, 82, 448, 34" />
<area item="second" href="#" shape="polygon" coords="560, 81, 562, 206, 660, 255, 756, 208, 758, 81, 659, 31" />
</map>
<img width="1000" height="667" src="main.png" usemap="#FPMap0" alt=""/>
<div class="comb" id="first">t1</div>
<div class="comb" id="second">t2</div>
<script>
$('area').on('click',function() {
$('.comb').hide();
$('#' + $(this).attr('item')).show();
});
</script>
</body>
</html>
2 個解決方案
解決方案1
3 已采納 2015-05-20 02:11:18
我已經給出了詳細的逐步說明，它應該與您當前使用的源代碼一樣工作，但無需使用jQuery。
function toggle(){
//Get all elements with the class comb
var comb=document.getElementsByClassName('comb');
//Loop through all elements
for(var i=0; i<comb.length; i++){
//Hide all elements
comb[i].style.display='none';
}
// this = the element used to trigger/fire the function
// getAttribute("item") = item="something"
//Display element by ID
document.getElementById(this.getAttribute("item")).style.display='block';
}
// Run when Page is ready
window.onload=function(){
//Get all area elements
var area=document.getElementsByTagName('area');
for(var i=0; i<area.length; i++){
//Set event Listener
area[i].addEventListener('click',toggle,false);
}
}
如果您有任何疑問，請在下面發表評論，我們會盡快與您聯系。
我希望這有幫助。 編碼愉快！
解決方案2
1 2015-05-20 02:00:03
var areas = document.getElementsByTagName('area');
for(var i = 0; i < areas.length; i++){
areas[i].onclick = function(){
var combs = document.getElementsByClassName('comb');
combs[i].style.display = 'none';
var item = this.getAttribute('item');
document.getElementById(item).style.display = 'block';
}
}
使用jQuery顯示和隱藏div？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.