I don't know if this falls under "bad practice" or not, but time and time again here on the group, people post code like yours where they use an <a> tag to do something that has nothing to do with an <a> tag
If you don't want to go somewhere, why not just use a <span> or a <div> and hang the click event on that? then propagation is a non- issue On Apr 14, 10:49 pm, Dante <danh...@gmail.com> wrote: > Hello, > > I'm just starting to delve into JQuery, and I'd like to extinguish as > many bad practices as possible. > > I wrote my first script from scratch a few days ago, and here is an > outline of what I wanted the script to do: > > >Generate the "category" links/controls onload for graceful degradation > >Display all list items or subsets of a list (grouped by classes on the li) > >when a user clicks on a "category" link > >Set "selected" class on current "category" link. > > For example, my page has three links "View all," "Foo1," and "Foo2," > and "View all" is the selected value by default, showing all the items > in the unordered list below it. > > Clicking "Foo1" will display only those list items with a class of > "Foo1," hiding every other list item. Clicking "Foo2" will display > only those list items with a class of "Foo2," ect... > > I was able to hack together a Jquery script that does exactly what I > want, but I feel like it is terribly inefficient. I'd appreciate a > tear-down of the code with suggestions for improvement. There may be > discrepancies/typos in the classes or IDs during their conversion to > "fooism." > > Thanks! > > <script type="text/javascript"> > $(document).ready(function(){ > $("#selector ul") > .prepend("<li><a href=''>All</a></li><li class='Foo1-button'><a > href=''>Foo1</a></li><li class='Foo2-button'><a href=''>Foo2</a></ > li>"); > $("#selector a").click(function(event){ > $("a.selected").removeClass("selected"); > $(this).addClass("selected"); > return false; > }); > $("li.Foo1-button a").click(function(event){ > $("#list li.foo1").css('display', 'block'); > $("#list li:not(li.foo1)").hide(); > return false; > }); > $("li.Foo2-butt a").click(function(event){ > $("#list li.foo2").css('display', 'block'); > $("#list li:not(li.foo2)").hide(); > return false; > }); > }); > </script> > > ============================================== > > <div id="selector"> > <ul> > </ul> > </div> > <ul id="list"> > <li class="foo1">Item 1</li> > <li class="foo2">Item 2</li> > </ul>