Selecting a menu option using jQuery?

I have a web page that contains a menu built using <div> tags. The structure is below:

Code:

---

            <div id="mnuStructure" style="border-top: 1px Solid Gray; border-bottom: 1px Solid Gray">
                <div id="opt1" class="menuItems2"><a href="#">Option 1</a></div>
                <div id="opt2" class="menuItems2"><a href="#">Option 2</a></div>
                <div id="opt3" class="menuItems2"><a href="#">Option 3</a></div>
                <div id="opt4" class="menuItems2"><a href="#">Option 4</a></div>
                <div id="opt5" class="menuItems2"><a href="#">Option 5</a></div> 
            </div>

---

What I'm trying to do, is load the menu option selected into a variable using jQuery. I'm not real good with jQuery yet some I'm kinda stuck. What is the best way to do this?

Thanks,

I would normally do a menu with <ul> as it is more sematically valid to have a list of items styled as a menu ("list-style-type:none", etc.).

Having said that, do you want to have a click handler for each <a> in the menu, without it actually navigating to a separate url?

Yes, that is what I am looking for. As far as the navigation goes, depending on the menu option selected, it will only display a <div> and not redirect to another page.

http://jsfiddle.net/HRTr8/

http://css-tricks.com/return-false-and-prevent-default/

Keep in mind that jQuery UI has a Menu widget, which may or may not do what you want. Why re-invent the wheel every time? :)