Menu
Please excuse my ignorance, I have no idea what I'm doing, but I'm trying.
I attempted to figure it out by searching, but it has only yielded a functional result in jQuery. Since this is such a small section, I think it would be better to just use plain vanilla JavaScript instead of loading the entire jQuery library.
Does anyone know how/if I can accomplish the same functionality below, but with only normal JavaScript? Basically what I am trying to do is when "butt1" is clicked, the unordered list "links" will become hidden and the div "box1" will be shown:
<html>
<head>
<title>qwerty</title>
<style type="text/css">
.box1 {background: red;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$("#butt1").live("click", show_box1);
function show_box1(event) {
$("#links").css("display", "none");
$(".box1").css("display", "inline");
}
</script>
</head>
<body>
<ul id="links">
<li id="butt1"><a href="#">blah</a></li>
<li id="butt2"><a href="#">blah</a></li>
<li id="butt3"><a href="#">blah</a></li>
</ul>
<div class="box1" style="display: none;">You clicked butt1!</div>
</body>
</html>
Here's a link to the above as a working example: http://jsbin.com/umitef/4/ -- this is the functionality I want replicated.
My extended thanks to anyone who takes a moment.. :-)
297
You can use getElementById to select an element using an id (equivalent to $("#something")), and getElementsByClassName to select elements based on class name (equivalent to $(".something")), and you can use the style property to set the display style (equivalent to the jQuery .css method):
var boxes = document.getElementsByClassName("box1");
document.getElementById("butt1").onclick = function() {
document.getElementById("links").style.display = "none";
for(var i = 0; i < boxes.length; i++) {
boxes[i].style.display = "inline";
}
}
Note however that getElementsByClassName is not supported in older versions of IE, which is why jQuery can be useful even for small things - it shortens the code and irons out all the annoying little browser differences.
Also, one major difference between the above code and your jQuery is the use of the .live jQuery method, which monitors the DOM and attaches the event to any element matching the selector, whether it was in the DOM already or it gets added in the future. With the above code, if there is not already an element with id "butt1" in the DOM when the code runs, you will get a TypeError, because getElementById will return null.
86
$("#links").css("display", "none");
Could become:
document.getElementById('links').style.display = 'none';
Realistically, loading jQuery makes a lot of sense since you're doing it from the Google CDN. A lot of sites use that so there is a good probability that at some point at least some of your users have already downloaded it. Plus, jQuery compressed is a very small download. So much so that the readability of jQuery style code is worth it.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
