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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript..onClick..if Statement HELPP

Status
Not open for further replies.
rocky06

rocky06

Programmer
Joined
May 21, 2007
Messages
6
Location
US
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">
<!--
var selectedLink;
function selectLink(lnk) {
if (selectedLink) selectedLink.style.fontWeight='normal';
lnk.style.fontWeight='bold';
selectedLink=lnk;
}
//-->
</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
 
Sort by date Sort by votes
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][snake] <.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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>


[monkey][snake] <.
 
Upvote 0 Downvote
Thanks a lot guys. I'm using Reddot, which is a pretty unique CMS, so I have some boundaries. Thanks again.
 
Upvote 0 Downvote
Monksnake,
I only want this function to affect the subnavigation, and not the rest of the page.

Here's an example: **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.
 
Upvote 0 Downvote
Hey guys,
Here's some more info.
Here's the code
************************************************************
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!--
var selectedLink;
function selectLink(lnk) {
if (selectedLink) {
selectedLink.style.fontWeight='normal';
selectedLink.style.textDecoration='none';
}
lnk.style.fontWeight='bold';
lnk.style.textDecoration='none';
selectedLink=lnk;
}
//-->
</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">&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="#" onClick="selectLink(this)">Why Perhsing</a> |
<a href="#" onClick="selectLink(this)">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=" 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>
************************************************************
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
 
Upvote 0 Downvote
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>

[monkey][snake] <.
 
Upvote 0 Downvote
Thanks monksnake, I really appreciate it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
605
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
607
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
938
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top