With a href=“#” jquery work but with a href=“page.jsp” not working

Question

0.00/5 (No votes)

See more:

Hello

My problem is when I click on menu it must be highlighted as selected. But this is not happening, when I am selecting any menu tab which is link with page then Home tab shown as selected, but if I replace that page link with # then that tab is showing as selected. Below is the code give for gallery.jsp,guestHead.jsp and CSS gallery.jsp

Java

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr bgcolor="#36b0b6">
    <td width="100%"><% if(session.getAttribute("userid")=="Admin"){ %>
        <jsp:include page="adminHead.jsp"></jsp:include></td>
        <% } else { %>
        <jsp:include page="guestHead.jsp"></jsp:include></td>
        <% } %></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1" bgcolor="#36b0b6">
  <tr bgcolor="#36b0b6">
    <td width="10%" height="557" valign="top">
     <jsp:include page="left.jsp"></jsp:include>
    </td>
    <td width="75%" valign="top">       
    <div class="container">
            <div class="image-row">
                <div class="image-set">
                    <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                    <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                    <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                    <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
        </div>
            </div>
    </div>
    </td>
</tr>
<table>

guestHead.jsp

Java

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<link rel="stylesheet" href="styles.css" />
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>

<script language="javascript">
$(window).load(function(){
  $('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
  });
});
</script>

<pre lang="CSS"><div id='cssmenu'>
<ul> 
  <li class='active'><a href="index.jsp">Home</a></li> 
  <li><a href="Untitled-1.jsp">About Us</a></li> 
  <li><a href="gallery.jsp">Gallery</a></li> 
  <li><a href="#">Alumni</a></li> 
  <li><a href="#">Events</a></li> 
  <li><a href="#">Polling</a></li> 
  <li><a href="#">Feedback</a></li> 
  <li class='last'><a href="#">Contact Us</a></li> 
</ul>   
</div>

style.css

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#cssmenu {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#cssmenu ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

What I have tried:

$(window).load(function(){
$('#cssmenu li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
});

Posted 15-Mar-16 5:34am

Member 12393971

Updated 15-Mar-16 6:00am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2016-03-15T06:00:00

Solution 1

Running javascript on the client event doesn't stop the link being a functioning link so after your event runs it navigates the page away. A link to "#" is essentially a link to the same page so it appears that the page hasn't navigated but you'll find it has jumped to the top.

Anyway, the solution is to cancel the default navigation so that the link doesn't go anywhere.

JavaScript

$(window).load(function(){
   $('#cssmenu li').on('click', function(e){
   $('li.active').removeClass('active');
   $(this).addClass('active');
   e.preventDefault();
 });
 });

Posted 15-Mar-16 6:00am

F-ES Sitecore

Comments

Member 12393971 15-Mar-16 12:19pm

@F-ES But by using e.preventDefault() not allowing to open the linked page and if linked page doesn't open then what is the use of navigation bar

F-ES Sitecore 15-Mar-16 12:28pm

If you're wanting to have the class added depending on the page then rather than doing it via the click event you should just ensure the relevant li has the relevant class when the page loads. So when the page is gallery.jsp make sure the corresponding li has the relevant class in the html.

Member 12393971 15-Mar-16 12:35pm

@F-ESSitecore Yes Yes you got my point, I want to add the active class to the relevant li tag when the page loads, this will make that li highlighted. And you mentioned last sentence "So when the page is gallery.jsp make sure the corresponding li has the relevant class in the html." perfectly this. but since last 2-3 days I am trying but not able to find any way. Kindly help to solve this. Sir if this not work then I have to change my complete project, and I have to submit in college within 3 days.