admin管理员组

文章数量:1389854

I would like to ask if it is possible to modify my code to achieve the same goal it currently does WITHOUT using jquery. I am embedding this code into sharepoint, and our pany makes it plicated to levarage jquery in it. Here is the code...

<html>
<head>
<style>
a,img { border: none; }
b {display: none;}
</style>
<script language="javascript" src=".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="b" id="first">t1</div>

<div class="b" id="second">t2</div>


<script>
$('area').on('click',function() {
$('b').hide();
$('#' + $(this).attr('item')).show();
});
</script>
</body>
</html>

I would like to ask if it is possible to modify my code to achieve the same goal it currently does WITHOUT using jquery. I am embedding this code into sharepoint, and our pany makes it plicated to levarage jquery in it. Here is the code...

<html>
<head>
<style>
a,img { border: none; }
.b {display: none;}
</style>
<script language="javascript" src="https://ajax.googleapis./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="b" id="first">t1</div>

<div class="b" id="second">t2</div>


<script>
$('area').on('click',function() {
$('.b').hide();
$('#' + $(this).attr('item')).show();
});
</script>
</body>
</html>
  • javascript
  • sharepoint
Share Improve this question edited May 20, 2015 at 2:08 rafacardosoc asked May 20, 2015 at 1:50 rafacardosocrafacardosoc 2511 gold badge7 silver badges16 bronze badges 1
  • why is jQuery tagged in this question if you don't want to use it. I would suggest you remove the tag and yes, this is very possible to do using pure javascript, what have you tried so far? – NewToJS Commented May 20, 2015 at 1:53
Add a ment  | 

2 Answers 2

Reset to default 4

I have given a detailed step by step, this should work just like the current source code you have but without the use of jQuery. 

function toggle(){
    //Get all elements with the class b
    var b=document.getElementsByClassName('b');
    //Loop through all elements
    for(var i=0; i<b.length; i++){
        //Hide all elements
        b[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);
    }
}

If you have any questions, please leave a ment below and I will get back to you as soon as possible.

I hope this helps. Happy coding! 

var areas = document.getElementsByTagName('area');

for(var i = 0; i < areas.length; i++){
    areas[i].onclick = function(){
        var bs = document.getElementsByClassName('b');
        bs[i].style.display = 'none';
        var item = this.getAttribute('item');
        document.getElementById(item).style.display = 'block';
    }
}

本文标签： javascriptHide and Show Divs without using JqueryStack Overflow

版权声明：本文标题：javascript - Hide and Show Divs without using Jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744655541a2617941.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。