如何在某些按钮点击时在jsp中切换div

时间:2018-03-04 10:58:28

标签: javascript jquery jsp

我的问题是我在两个不同的div下面有两个ul列表。让我们说showandhide.jsp是需要加载某些动作的文件。我希望div1在页面加载时始终可见,而div2应始终隐藏。 点击“点击我”div应该切换。

代码如下

package database;

import java.awt.Component;
import java.awt.List;
import java.io.File;
import java.math.BigInteger;
import java.net.Inet4Address;
import java.net.InetAddress;
import java.net.SocketImpl;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.CountDownLatch;

import javax.swing.DefaultListModel;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JTextArea;

import common_interface.Honeyword;

public class JDBC {

    public static void ConnectDatabase()
    {
        try
        {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            con=DriverManager.getConnection("jdbc:oracle://localhost:3306/Honeyword","root","qwertyuiop4595");
            System.out.println("Connected to Database..");
        }
        catch (Exception e)
        {
            System.out.println(e);
        }
    }

    static Connection con;

这就是我正在做的事情

<button onclick="showAndHideUl()" id="preview">click me!</button>
<div1 id="withoutcomponent">
      // first ul list
</div>    
<div2 id="withcomponent"> 
      //second ul list
</div>

1 个答案:

答案 0 :(得分:1)

首先,没有像div1或div2这样的html标签,它总是<div>。其次,你的功能有点混乱,你应该确保你已经正确地包含了jQuery库,因为你在脚本中使用它。查看我为您制作的工作片段。使用.toggle()代替.hide() .show()也是一种很好的做法,因为犯错的风险较小

$(document).ready(function(){
    $("#withcomponent").toggle();
    showAndHideUl = function()
    {
        $("#withoutcomponent").toggle();
        $("#withoutcomponent").toggleClass("component");
        $("#withcomponent").toggle();
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showAndHideUl()" id="preview">click me!</button>
    <div id="withoutcomponent">
    // first ul list
    </div>

    <div id="withcomponent"> 
    //second ul list
    </div>