Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

HTML or jQuery help

Hi All,

From the image below, when a link on the left side is clicked on, it filters the list on the right side.

What I want to happen is for the link that is clicked on to stay selected.  How can I do that?

User generated image
Here's my code that I have so far:
<TABLE style="WIDTH: 50%">
<TBODY>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{8587EB30-CA69-497C-86F4-AC342FCEC3F4}','0');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target=_self>ALL</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target=_self>APC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" target=_self>AWEC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" target=_self>AXASC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" target=_self>AMDW</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" target=_self>MWQSPC</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" target=_self>AQP</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" target=_self>VOE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" target=_self>QERAF</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" target=_self>MEAFA</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" target=_self>DNEE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" target=_self>ADUW</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" target=_self>DMKE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" target=_self>SDSD</A></P></TD></TR></TBODY></TABLE>

Open in new window

Avatar of themrrobert
themrrobert
Flag of United States of America image

If you want the link to stay selected (using your current code) you will need to do something like this:

give the <a> tags an id.  (eg:  <a ..... id="link1"> )

It's a bit tricky for me to understand exactly what you are trying to do, but to select the link, you can use jquery to do:

$('#link1').setFocus(); and this  would setfocus (select) the link in question.
Avatar of Isaac

ASKER

Thanks!

For a better explanation, here's an example:

Let's say I have the links below, if the user clicks Link B, I want it to be selected until another link is selected.  So if they selected Link A, Link B won't be bold and underlined anymore but Link A will.

Link A
Link B
Link C

Hope that makes sense.  I will give what you have a try though.

Thanks again!
What you describe here can be accomplished with css.

Assuming all of your links are of the class="mylinks" then in your stylesheet.css:

.mylinks {text-decoration: none; font-weight: 300; }
.mylinks:active { text-decoration: underline; font-weight: 800; }
Avatar of Isaac

ASKER

So, I found this piece of code,

http://jsfiddle.net/VtWxF/6/

I set it up in SharePoint 2007 web part page and the problem is that when I click on the link,  it does not work.  As you can see from my initial code above, the page redirects to itself and the page refreshes.

Any ideas how to resolve this?

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of Isaac
Isaac
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

Resolved my own issue.