Question

我试图这样做好几天。请求帮助我这样做，我不知道该怎么做。如果有任何错误，请善待他们。谢谢。

这是 HTML 代码

＆＃13;

<li><a href="#" onclick="getProjectDetails();"> 
<i class="fa fa-dashboard"></i> <span>New Project</span>
<i class="fa fa-angle-left pull-right"></i>

＆＃13;

这是 AJAX CODE

  <script type="text/javascript">       
        function getProjectDetails() {

            $.show( "project?create", function ( data ) {

                $( "#mainContainer" ).html( data );
            });
        }   
    </script>

这是控制器类

@Controller
public class ProjectController {
    private static final Logger logger = LoggerFactory.getLogger(UserController.class);

    @RequestMapping(value="project", params="create", method= RequestMethod.GET)//folder name, page name
    public String createProject(Model model) {
        logger.info("create project methof called");
        model.addAttribute("dto", new ProjectDTO());

        return "project/create";
    }
}

这是数据传输类

    public class ProjectDTO {

    @NotNull
    @Size(min=4 , max=30)
    private String projectName;

    public ProjectDTO() {

    }

    public String getProjectName() {
        return projectName;
    }

    public void setProjectName(String projectName) {
        this.projectName = projectName;

        System.out.println("Value is :  " + projectName);
    }
}

以下是界面的一些图像。我所说的div是图像中空间很大的空间。

enter image description here

Answer 1

正如我在评论中提到的，我建议使用Bootstrap collapisbles，因为您只需要HTML和CSS。以下是一个简单的示例，但请查看以下内容以获取更多信息：http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse">Collapsible Group</a>
        </h4>
    </div>
    <div id="collapse" class="panel-collapse collapse">
        <div class="panel-body">
            Everything goes here...
        </div>
    </div>
</div>

Answer 2

<html>
<head>
    <style type="text/css">
        .windowModal { 
        position: fixed; 
        font-family: Arial, Helvetica, sans-serif; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0; 
        background: rgba(0,0,0,0.8); 
        z-index: 99999; 
        opacity:0; 
        -webkit-transition: opacity 400ms ease-in; 
        -moz-transition: opacity 400ms ease-in; 
        transition: opacity 400ms ease-in; pointer-events: none; 
        } 
        .windowModal:target { 
        opacity:1; pointer-events: auto; 
        } 
        .windowModal > div { 
        width: 200px; 
        position: relative; 
        margin: 10% auto; 
        padding: 5px 20px 13px 20px; 
        border-radius: 10px; 
        background: #fff; 
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999); 
        background: -o-linear-gradient(#fff, #999); 
        height"30px;
        } 
        .close { 
        background: #606061; 
        color: #FFFFFF; 
        line-height: 25px; 
        position: absolute; 
        right: -12px; 
        text-align: center; 
        top: -10px; 
        width: 24px; 
        text-decoration: none; 
        font-weight: bold; 
        -webkit-border-radius: 12px; 
        -moz-border-radius: 12px; 
        border-radius: 12px; 
        -moz-box-shadow: 1px 1px 3px #000; 
        -webkit-box-shadow: 1px 1px 3px #000; 
        box-shadow: 1px 1px 3px #000; 
        } 
        .close:hover { 
        background: #00d9ff; 
        } 
    </style>
    <title>Hello</title>
    <script>
        $(document).ready(function() { $("#divModal").load("#divModal"); }); 
    </script>
</head>
<body onload="#divModal">
    <a href="#divModal">Open Modal Window</a>
    <div id="divModal" class="windowModal">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <h2>Hello World</h2>
            <form id="formname" name="formname" method="post" action="submitform.asp">
                <div>
                </div>
            </form>
        </div>
    </div>
</body>

如何在没有刷新整个页面的情况下点击链接时加载特定的DIV？

2 个答案: