如何使用JavaScript打开新的JSP页面

Question

I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how? thanks in advance...

<div>
 <ul>
  <li id=home onclick="show(this.id)"><a href="home.jsp">Home</a></li>
  <li id=collection onclick="show(this.id)><a href="collection.jsp">Collection</a></li>
     <ul>
       <li id=men onclick="show(this.id)><a href="men.jsp">Men</a></li>
       <li id=women onclick="show(this.id)><a href="women.jsp">Women</a></li>
     </ul>
  <li id=contact onclick="show(this.id)><a href="contact.jsp">Contact</a></li>
</ul>
</div>

Answer 1

Yes you can.

Use window.open("URL") in your case URL is this.id

Also you can update window.location

read more here http://www.tizag.com/javascriptT/javascriptredirect.php

Like Niko said you need closing quotes

.. onclick="window.open(this.id)" ..

Answer 2

Try this?

$("div > ul li a").click(function() {
    window.location.href += "/" + $(this).parent()[0].id;
});

I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.

Answer 3

If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:

<script type="text/javascript">
    var show = function(id) {
        window.location.href = id + '.jsp';
    };
</script>

If you want to navigate DOM and get link's href attribute use:

document.getElementById(id).firstChild.href

Considering that the first element inside the component referred by ID is a link tag.

Answer 4

This makes no sense.

I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block . This way the link will span the entire space of its parent element.

<ul id="menu">
  <li><a href="home.jsp">Home</a></li>
  <li><a href="collection.jsp">Collection</a></li>
     <ul>
       <li><a href="men.jsp">Men</a></li>
       <li><a href="women.jsp">Women</a></li>
     </ul>
  <li><a href="contact.jsp">Contact</a></li>
</ul>

with this CSS

#menu li a {
    display: block;
}

No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp'; . But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.