Am I forced to use href="#" when working with jQuery?

So I wrote a small bit of jQuery that uses .toggleTrigger and a rel a开发者_运维百科ttribute to toggle other items.

First problem I have with it is that when I use a button tag, it opens, then closes immediately. It works fine if I use an anchor tag.

Second problem is that if I scroll down the page and hit an anchor tag to toggle something below it, it takes me back to the top of the page because of the href="#" attribute.

I know these must be newbie problems but I just cant figure out how to get around them.

Could someone help please?

should my href point to something like href="#divThatWillBeToggled"

Am I forced to use <a> tags for the toggleTrigger? I cant use <button> tags?

EDIT (Pardon me I am new here and to programming)

<a href="#" class="toggleTrigger">This is my Toggle Trigger</a>
<div class="toggle">This is info that is hidden and waiting to be toggled by the trigger</div>

The href attribute must be included in on your anchor tags as defined by the W3C standard. However, you don't have to use href="#'. You could also use href="javascript:void(0)".

Alternatively, if you don't care about the standard, you can omit the href, however your cursor will not change into the pointer like normal hyperlinks. You'll need to user cursor:pointer in your CSS on the anchor.

You need to set the "href" attribute of the anchor otherwise it will not raise its click event. To stop the scrolling behavior use preventDefault:

<a href="#">click me</a>

<script>
$(document).ready(function() {
   $("a").click(function(e) {
        e.preventDefault(); // prevent the default behavior (scrolling to the top)
        // perform other code
   });
});
</script>

Am I forced to use href=“#” when working with jQuery?

No. This is terrible practice. Build on things that work.

First problem I have with it is that when I use a button tag, it opens, then closes immediately. It works fine if I use an anchor tag.

This sounds like you are not doing anything to cancel the default action, thus submitting a form. (It also sounds like the server side alternative doesn't do the same thing as the JavaScript, so you aren't being progressive)

Second problem is that if I scroll down the page and hit an anchor tag to toggle something below it, it takes me back to the top of the page because of the href="#" attribute.

The URL # means "The top of the current page". If you don't want the link to be followed after the JS runs, then you need to prevent the default action (as above).

should my href point to something like href="#divThatWillBeToggled"

Yes. The div should also not be hidden with CSS by default (you can hide it immediately with JS though) so it will remain visible if JS isn't available.

Am I forced to use tags for the toggleTrigger? I cant use tags?

HTML is all about tags. Your last question doesn't make sense.

...it takes me back to the top of the page because of the href="#" attribute.

If you're handling the click on the anchor via JavaScript, in the event handler use either event.preventDefault(); or return false; to cancel the default action (which is following the link).

The best thing to do is make the links really link somewhere useful, so that users who have JavaScript disabled can use the page (this is relevant to web pages, as opposed to web applications which can reasonably require JavaScript, provided they check for it and show a nice message if it's not found). So instead of href="#", which is largely meaningless, have it actually take you somewhere meaningful — but then override that with JavaScript (by using event.preventDefault(); or return false; in the handler).

event.PrevenDefault is what are you looking for http://api.jquery.com/event.preventDefault/

write anchor tags like this

href="javascript:"

eg

<a href="javascript:" id="myAnchorTagId">my anchor tag <a>

Instead of #, use href="javascript:" if you want.