Javascript..onClick..if Statement HELPP

rocky06 · May 21, 2007

This is a great site. I'm having a some trouble with this specific script.

I'm going to paste the whole html file so you can just preview it.

<html>
<head>
<title>Test</title>
<script language="JavaScript">

</script>
<style type="text/css">
a:link {
color: #003366
}/* unvisited link */
a:visited {
color: #000000
}/* visited link */
.stepbrother2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-align: left;
color: #000000;
font-weight: normal;
}
</style>
</head>

<body>
<span class="stepbrother2"><a href="#" onClick="selectLink(this)">Why Perhsing</a> |
<a href="#" onclick="selectLink(this)">Prodcuts and Services</a></span>
</body>
</html>

Problem: What I essentially want this script to do is when i click on a link, the link will be bolded and "not" underlined, while the other link will "not" be bolded but it will be underlined.

Currently, I have it set to both links being underlined in both instances.

Please help. thanks

monksnake · May 21, 2007

So I take it when the page loads, you want them both underlined and NOT bolded?

Are you only going to have 2 links?

[monkey]

<.

feherke · May 21, 2007

Hi

Code:

function selectLink(lnk) {
  if (selectedLink) {
    selectedLink.style.fontWeight='normal';
    selectedLink.style.textDecoration='underline';
  }
  lnk.style.fontWeight='bold';
  lnk.style.textDecoration='none';
  selectedLink=lnk;
}

Feherke.

http://rootshell.be/~feherke/

rocky06 · May 21, 2007

When the page loads i only want the active page to be bolded. Neither of the links should be underlined. I'm sorry for that, I shouldn't have wrote that.

I will have more that 2 links on some pages. This is essentially a sub navigation. When one page is clicked on, only that page title should be bolded. thanks.

feherke · May 21, 2007

Hi

And from what should the script deduce which one has to be bold ? URL, [tt]title[/tt] maybe a heading ?

Feherke.

http://rootshell.be/~feherke/

monksnake · May 21, 2007

This can be done without using javascript at all. It is recommended not to use javascript if you can avoid it.

Code:

<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!--
var selectedLink;
function selectLink(lnk) {
  if (selectedLink) selectedLink.style.fontWeight='normal';
  lnk.style.fontWeight='bold';
  selectedLink=lnk;
}
//-->
</script>
<style type="text/css">
a {
   text-decoration:none;
   color: #003366 
}

a:visited {
    color: #000000 
    }/* visited link */

a:active {
   font-weight:bold;
}

</style>
</head>

<body>
<span class="stepbrother2"><a href="#">Why Perhsing</a> | 
<a href="#">Prodcuts and Services</a></span>
</body>
</html>

<.

rocky06 · May 21, 2007

Thanks a lot guys. I'm using Reddot, which is a pretty unique CMS, so I have some boundaries. Thanks again.

rocky06 · May 21, 2007

Monksnake,
I only want this function to affect the subnavigation, and not the rest of the page.

Here's an example:

http://www.pershing.com/why/why.html

**I want to have this funtionality using javascript, and withought the underline.
**because of Reddot we have some boundries.

With the example you gave me, if i click anywhere in the body the "bold" will disappear.

Thanks.

rocky06 · May 21, 2007

Hey guys,
Here's some more info.
Here's the code
************************************************************
<html>
<head>
<title>Test</title>
<script language="JavaScript">

</script>
<style type="text/css">
a:link {
color: #003366;
}/* unvisited link */
a:visited {
color: #000000;
}/* visited link */
.stepbrother2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-align: left;
color: #000000;
font-weight: normal;
text-decoration: none
}
.brother {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-align: left;
font-weight: normal;
color: #000000
}
.mother {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: left;
color: #003366;
font-weight: bold;
}
</style>
</head>

<body>
<table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td colspan="2" align="left"> </td>
</tr>
<tr>
<td colspan="2" align="left"><table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center"> <span class="stepbrother2"><a href="#" onClick="selectLink(this)">Why Perhsing</a> |
<a href="#" onClick="selectLink(this)">Prodcuts and Services</a></span></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><span class="mother">Who We Are</span></td></tr>
<tr><td><span class="brother">Pershing works behind the scenes to provide the people, services, and technologies that help make successful investments possible. We are the key industry source for a diverse array of support, including securities processing, trading and operations management, investment technology, asset-gathering solutions, and practice management support.<br />
<br />
Our challenge lies in anticipating the changing needs of financial organizations, investment professionals, and registered investment advisors worldwide to strengthen their competitive positions and help them to better serve their clients. The information contained in this site will give you a glimpse of what we offer to support their success.</span></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Pershing Is People</span></td>
</tr>
<tr>
<td><span class="brother">Our framework is made up of more than 4,300 highly focused, experienced professionals who develop and support the interests of financial organizations. Each partnership embodies a service team approach and is managed by an experienced and dedicated Relationship Manager.</span> </td>
</tr>
</table></td>
<td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Ownership</span> </td>
</tr>
<tr>
<td><span class="brother">Pershing LLC is a subsidiary of The Bank of New York Company, Inc. The Bank of New York has offices located in 33 countries and offers the support of over 23,000 professionals worldwide.<br />
<br />
<br />
</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Pershing
Is Worldwide Presence</strong></span> </span></td>
</tr>
<tr>
<td><span class="brother">We support more than 1,100 financial organizations worldwide, with U.S. regional offices in Boston, Chicago, Los Angeles, San Francisco, and Charlotte, North Carolina. A London subsidiary, <a href="

http://www.pershing.co.uk/"

target="_blank"> Pershing Limited</a>, provides multicurrency execution and clearing services.</span></td>
</tr>
</table></td>
<td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Pershing
Is Products And Services</span> </td>
</tr>
<tr>
<td><span class="brother">We offer an extensive range of investment <a href="../prod_serv/products.html">products and services</a> that enable financial organizations and their investment professionals to compete successfully in the marketplace. <br />
<br />
<br />
</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Pershing
Is Quality Trading And Execution</span> </td>
</tr>
<tr>
<td><span class="brother">A focus on quality in every task we perform, including <a href="../prod_serv/quality_trading.html">trading and execution,</a> provides a competitive advantage as you meet your clients’ expectations.</span> </td>
</tr>
</table></td>
<td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="mother">Pershing
Is Cutting-Edge Facilities and Technology</span> </td>
</tr>
<tr>
<td><span class="brother">Our facilities provide an efficient and secure operating environment, and enable us to deliver <br />
the highest-quality products and services to our customers.</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>

</body>
</html>
************************************************************
When you initially open this page you will see the sub navigation like this...
Why Perhsing | Prodcuts and Services (both being underlined and not bolded)

What i want is this...
Why Perhsing | Prodcuts and Services (just Why Pershing being bold/with no underline/Products and Services staying normal)

Thanks..hope this helps

monksnake · May 21, 2007

I'll just post a working example of what you are wanting.
Any modified parts are highlighted in red so you can see what I did.

Code:

<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!--
[!]
var selectedLinkId = "pershing";
function selectLink(lnk) {
   document.getElementById(selectedLinkId).className = "";
   selectedLinkId = lnk.id;
   lnk.className = "highlighted";
}
[/!]
//-->
</script>
<style type="text/css">
a:link {
    color: #003366;
    }/* unvisited link */
a:visited {
    color: #000000;
}/* visited link */

.stepbrother2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size:13px;
    text-align: left;
    color: #000000;
    font-weight: normal;
    text-decoration:none;
    }
[!]
.stepbrother2 a {
   text-decoration:none;
}

.stepbrother2 a.highlighted {
    font-weight:bold;
    }
[/!]
.brother {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size:13px;
    text-align: left;
    font-weight: normal;
    color: #000000
    }
.mother {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 80%;
    text-align: left;
    color: #003366;
    font-weight: bold;
    }
</style>
</head>

<body>
<table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td colspan="2" align="left">&nbsp;</td>
</tr>
        <tr>
          <td colspan="2" align="left"><table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><table width="730" border="0" cellspacing="0" cellpadding="0">
                    <tr>
              <td><div align="center">  [!]<span class="stepbrother2"><a href="#" id="pershing" class="highlighted" onClick="selectLink(this)">Why Perhsing</a> | 
<a href="#" onClick="selectLink(this)" id="products" >Prodcuts and Services</a></span>[/!]</div></td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>                    
                  </table></td>
              </tr>
            <tr>
                <td><span class="mother">Who We Are</span></td></tr>
                  <tr><td><span class="brother">Pershing works behind the scenes to provide the people, services, and technologies that help make successful investments possible. We are the key industry source for a diverse array of support, including securities  processing, trading and operations management, investment technology, asset-gathering solutions, and practice management support.<br />
<br />
Our challenge lies in anticipating the changing needs of financial organizations, investment professionals, and registered investment advisors worldwide to strengthen their competitive positions and help them to better serve their clients. The information contained in this site will give you a glimpse of what we offer to support their success.</span></td>
              </tr>
              <tr><td>&nbsp;</td></tr>
              <tr>
                <td><table width="730" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Pershing Is People</span></td>
                          </tr>
                          <tr>
                            <td><span class="brother">Our framework is made up of more than 4,300 highly focused, experienced professionals who develop and support the interests of financial organizations. Each partnership embodies a service team approach and is managed by an experienced and dedicated Relationship Manager.</span> </td>
                          </tr>
                        </table></td>
                      <td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
                          <tr>
                            <td>&nbsp;</td>
                          </tr>
                        </table></td>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Ownership</span> </td>
                          </tr>
                          <tr>
                            <td><span class="brother">Pershing LLC is a subsidiary of The Bank of New York Company, Inc. The Bank of New York has offices located in 33 countries and offers the support of over 23,000 professionals worldwide.<br />
                              <br />
                              <br />
                            </span></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><table width="730" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Pershing 
                              Is Worldwide Presence</strong></span> </span></td>
                          </tr>
                          <tr>
                            <td><span class="brother">We support more than 1,100 financial   organizations worldwide, with U.S. regional offices in Boston, Chicago, Los Angeles, San Francisco, and Charlotte, North Carolina. A London subsidiary, <a href="[URL unfurl="true"]http://www.pershing.co.uk/"[/URL] target="_blank"> Pershing Limited</a>, provides multicurrency execution and clearing services.</span></td>
                          </tr>
                        </table></td>
                      <td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
                          <tr>
                            <td>&nbsp;</td>
                          </tr>
                        </table></td>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Pershing 
                              Is Products And Services</span> </td>
                          </tr>
                          <tr>
                            <td><span class="brother">We offer an extensive range of   investment <a href="../prod_serv/products.html">products and   services</a> that enable financial organizations and their investment professionals to compete successfully in the marketplace. <br />
                              <br />
                              <br />
                            </span></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><table width="730" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Pershing 
                              Is Quality Trading And Execution</span> </td>
                          </tr>
                          <tr>
                            <td><span class="brother">A focus on quality in every task we perform, including <a href="../prod_serv/quality_trading.html">trading and execution,</a> provides a competitive advantage as you meet your clients&rsquo; expectations.</span> </td>
                          </tr>
                        </table></td>
                      <td><table width="30" border="0" align="center" cellpadding="0" cellspacing="0">
                          <tr>
                            <td>&nbsp;</td>
                          </tr>
                        </table></td>
                      <td><table width="350" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><span class="mother">Pershing 
                              Is Cutting-Edge Facilities and Technology</span> </td>
                          </tr>
                          <tr>
                            <td><span class="brother">Our facilities provide an efficient and secure operating environment, and enable us to deliver <br />
                            the highest-quality products and services to our customers.</span></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
              </tr>

</body>
</html>

<.

rocky06 · May 21, 2007

Thanks monksnake, I really appreciate it.

monksnake · May 21, 2007

No prob.

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript..onClick..if Statement HELPP

rocky06

Programmer

monksnake

Programmer

feherke

Programmer

rocky06

Programmer

feherke

Programmer

monksnake

Programmer

rocky06

Programmer

rocky06

Programmer

rocky06

Programmer

monksnake

Programmer

rocky06

Programmer

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor