Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 453
  • Last Modified:

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?

Metric
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

0
Isaac
Asked:
Isaac
Advertise Here
  • 4
  • 2
1 Solution
 
themrrobertCommented:
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.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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!
0
 
themrrobertCommented:
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; }
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Start Now
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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!
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I found a solution.

I created an html navigation and added it to a CEWP.
For the navigation, I used the links already created from the web part connection.

All I did was just added an "ALL" and the link to resolve my issue.

<li class="all">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target="_self">ALL</A>
</li>
<li class="aetc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" target="_self">AETC</a>
</li>
<li class="afgsc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" target="_self">AFGSC</a>
</li>
<li class="afmc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" target="_self">AFMC</a>
</li>
<li class="afspc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" target="_self">AFSPC</a>
</li>
<li class="amc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" target="_self">AMC</a>
</li>
<li class="ang">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" target="_self">ANG</a>
</li>
<li class="pacaf">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" target="_self">PACAF</a>
</li>
<li class="usafa">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" target="_self">USAFA</a>
</li>
<li class="usafe">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" target="_self">USAFE</a>
</li>
<li class="afdw">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" target="_self">AFDW</a>
</li>
<li class="afsoc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" target="_self">AFSOC</a>
</li>
<li class="afrc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" target="_self">AFRC</a>
</li>

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Resolved my own issue.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Go Premium
  • 4
  • 2
Advertise Here
Tackle projects and never again get stuck behind a technical roadblock.
Join Now