Turning a JavaScript function into jQuery
I want to turn the JavaScript in this example into jQuery.
Basically I've jerry-rigged two scripts together. One is jQuery; creates the "active" function. But the hide/display layer function is in Javascript, and there's too much code for my liking, I'm thinking it must be possible to cut it down into something simple and effective with jQuery.
FYI, I just started out with Javascript and jQuery.
Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSMenu</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function HideLayer(d) { document.getElementById(d).style.display = "none"; }
function DisplayLayer(d) { document.getElementById(d).style.display = "block"; };
$(function() {
$('div.menuitem').click(function() {
var $this = $(this);
$('.active').removeClass('active');
$this.addClass('active');
})
});
</script>
<style>
#menuholder {width:100px; float:left; border-bottom:solid thin #000;}
.menuitem {border-top:solid thin #000; border-left:solid thin #000; border-right:solid thin #000;}
.menuitem:hover {cursor:pointer; color:#555}
.active {font-weight:bold; color:#000}
.active:hover {color:#000}
#layerholder {float:left; margin-left:20px; width:50px; height:50px; border:solid thin;}
.layer {padding-left:3px; font-size:36px; display:none;}
</style>
</head>
<body>
<div id="menuholder">
<div onClick="DisplayLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');HideLayer('fourthLayer')" class="menuitem">Item 1</div>
<div onClick="HideLayer('firstLayer');HideLayer('thirdLayer');HideLayer('fourthLayer');DisplayLayer('secondLayer')" class="menuitem">Item 2</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('fourthLayer');DisplayLayer('thirdLayer')" class="menuitem">Item 3</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');DisplayLayer('fourthLayer')" class="menuitem">Ite开发者_如何学Cm 4</div>
</div>
<div id="layerholder">
<div class="layer" id="firstLayer">1</div>
<div class="layer" id="secondLayer">2</div>
<div class="layer" id="thirdLayer">3</div>
<div class="layer" id="fourthLayer">4</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
You could change your HTML to:
<div id="menuholder">
<div rel="firstLayer" class="menuitem">Item 1</div>
<div rel="secondLayer" class="menuitem">Item 2</div>
...
</div>
And then use this jQuery:
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).show();
});
This also not 100% perfect as rel is not a valid attribute for div elements. You should consider changing the divs to a elements (and use the href attribute) which has the benefit that the browser also jumps to the linked element.
DEMO
Update: If you decide to go with links, it would be:
<div id="menuholder">
<a href="#firstLayer" class="menuitem">Item 1</div>
<a href="#secondLayer" class="menuitem">Item 2</div>
...
</div>
and
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$(this.href).show();
});
jQuery is JavaScript. There is absolutely no reason to "convert" anything.
And jQuery has hide and show functions built in.
$('#id').hide();
And as for your onClick event..
- It should be lowercase.
- You could just do
$('.layer').hide();$('#specificLayer').show();.
The script on that page already uses jquery as shown by the <script src="http://code.jquery.com/jquery-latest.js"> at the top, and the use of the $ sign before variables after it. Jquery is just a set of javascript functions in a library, so you can combine them without issue.
加载中,请稍侯......
精彩评论