页面提交，div隐藏+显示。炎炎烈日下跪求，

2013-08-09

页面提交，div隐藏+显示。-----炎炎烈日下跪求，在线等。 /** temp.jsp*/lia hrefindex.jspdiv2/a/l

页面提交，div隐藏+显示。-----炎炎烈日下跪求，在线等。


 /*
  * temp.jsp
  */
<li><a href="index.jsp">div2</a></li>


/*
* index.jsp 
* 页面功能：div隐藏+显示
*/
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'temp.jsp' starting page</title>
     <style type="text/css"> 
        .divHidden{ display:none;} 
        .divNormal{ position:absolute; width:200px;height:200px; border:solid 1px black;} 
    </style> 
    <script type="text/javascript"> 
        function controlInCenter(con) { 
            if (con) { 
                con.style.left = (document.documentElement.clientWidth - con.clientWidth) / 2 + "px"; 
                con.style.top = (document.documentElement.clientHeight - con.clientHeight) / 2 + "px"; 
            } 
        } 
        function bindButtonToDiv(buttonId, divId) { 
            var btn = document.getElementById(buttonId); 
            var div = document.getElementById(divId); 
            if (btn && div) { 
                btn.onclick = function() { 
                    var divs = document.getElementsByTagName("div");  
 
                    for (var i = 0; i < divs.length; i++) { 
                        divs[i].style.display = "none"; 
                    } 
                    div.style.display = "block"; 
                    controlInCenter(div); 
                } 
            } 
        } 
        window.onload = function() { 
            bindButtonToDiv("button1", "div1"); 
            bindButtonToDiv("button2", "div2"); 
            bindButtonToDiv("button3", "div3"); 
            bindButtonToDiv("button4", "div4"); 
            bindButtonToDiv("button5", "div5"); 
        } 
    </script> 
</head> 
<body> 
    <form runat="server" id="form1"> 
        <input type="button" id="button1" value="ShowDiv1" /> 
        <input type="button" id="button2" value="ShowDiv2" /> 
        <input type="button" id="button3" value="ShowDiv3" /> 
        <input type="button" id="button4" value="ShowDiv4" /> 
        <input type="button" id="button5" value="ShowDiv5" /> 
        <div id="div1" class="divNormal divHidden">div1</div> 
        <div id="div2" class="divNormal divHidden">div2</div>  
 
        <div id="div3" class="divNormal divHidden">div3</div> 
        <div id="div4" class="divNormal divHidden">div4</div> 
        <div id="div5" class="divNormal divHidden">div5</div> 
    </form> 
</body> 
</html>  
// 实现功能：当点击temp.jsp页面<li><a href="index.jsp">div2</a></li> 跳到index.jsp页面。直接显示div2的内容，该怎么实现呢，在线等。

[解决办法]

引用:

如果我的temp.jsp有多个

<li>
<a href="index.jsp">div1</a></li>
<a href="index.jsp">div2</a></li>
<a href="index.jsp">div3</a></li>
 //当点击div1 跳到index.jsp只显示div1内容，
//当点击div2 跳到index.jsp只显示div2内容，
//当点击div3 跳到index.jsp只显示div3内容，
//你这就行不通了。

你这还可行么？

你不早说
temp.jsp
<li><a href="index.jsp?div=div2">div2</a></li>
<li><a href="index.jsp?div=div3">div3</a></li>
<li><a href="index.jsp?div=div4">div4</a></li>
index.jsp


<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
     
    <title>My JSP 'temp.jsp' starting page</title>
     <style type="text/css"> 
        .divHidden{ display:none;} 
        .divNormal{ position:absolute; width:200px;height:200px; border:solid 1px black;}  
 
    </style> 
    <script type="text/javascript"> 
        function controlInCenter(con) { 
            if (con) { 
                con.style.left = (document.documentElement.clientWidth - con.clientWidth) / 2 + "px"; 
                con.style.top = (document.documentElement.clientHeight - con.clientHeight) / 2 + "px"; 
            } 
        } 
        function bindButtonToDiv(buttonId, divId) { 
            var btn = document.getElementById(buttonId); 
            var div = document.getElementById(divId); 
            if (btn && div) { 
                btn.onclick = function() { 
                    var divs = document.getElementsByTagName("div"); 
                    for (var i = 0; i < divs.length; i++) { 
                        divs[i].style.display = "none"; 
                    } 
                    div.style.display = "block"; 
                    controlInCenter(div); 
                } 
            } 
        } 
        window.onload = function() {  
 
        var v = window.location.search;
        if(v){
        var div2 = document.getElementById(v.split("=")[1]);
        }
        div2.style.display = "block";
            bindButtonToDiv("button1", "div1"); 
            bindButtonToDiv("button2", "div2"); 
            bindButtonToDiv("button3", "div3"); 
            bindButtonToDiv("button4", "div4"); 
            bindButtonToDiv("button5", "div5"); 
        } 
    </script> 
</head> 
<body> 
    <form runat="server" id="form1"> 
        <input type="button" id="button1" value="ShowDiv1" /> 
        <input type="button" id="button2" value="ShowDiv2" /> 
        <input type="button" id="button3" value="ShowDiv3" /> 
        <input type="button" id="button4" value="ShowDiv4" /> 
        <input type="button" id="button5" value="ShowDiv5" /> 
        <div id="div1" class="divNormal divHidden">div1</div> 
        <div id="div2" class="divNormal divHidden">div2</div> 
        <div id="div3" class="divNormal divHidden">div3</div> 
        <div id="div4" class="divNormal divHidden">div4</div> 
        <div id="div5" class="divNormal divHidden">div5</div> 
    </form> 
</body> 
</html>

热点排行

Java Web开发

页面提交，div隐藏+显示。炎炎烈日下跪求，