Question

我是使用jsp，ajax和jquery在eclipse中的一个web项目。它有两个JSP页面 - home.jsp和second.jsp。它还有一个单独的css和js个文件夹。

在second.jsp我已使用div，ul和a标记合并了标签面板，并将其与相应的css和javascript/jquery相关联。它作为一个单独的文件运行顺利。

在home.jsp我希望使用second.jsp JQuery的{{1}}方法致电Ajax。因此，为了实现这一点，我将load()，css和jquery的所有链接从javascript添加到second.jsp。

但我现在没有获得标签视图。以下是代码（文件方式）：

home.jsp ：

home.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <style type="text/css"> #homeDiv{ width: 1000px; height: 1000px: } </style> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.10.2.js" type="text/javascript"></script> <script src="js/jkl.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#but').click(function(){ $('#homeDiv').load('folder2/second.jsp #main');// I wanted to load specific part of second.jsp i.e div with ID `main`. return false; }); }); </script> </head> <body> <button id="but">press</button><br> <div id="homeDiv"></div> </body> </html> ：

second.jsp

styles.css的

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div id="main">
                <h1>Tabbed Panels</h1>
                <div class="tabbedPanels" id="tabbed1">
                    <ul class="tabs">
                        <li><a href="#panel1" tabindex="1">Tab 1</a></li>
                        <li><a href="#panel2" tabindex="2">Tab 2</a></li>
                        <li><a href="#panel3" tabindex="3">Tab 3</a></li>
                    </ul>
                    <div class="panelContainer">
                        <div id="panel1" class="panel">
                            <h2>Panel 1 content</h2>
                            <p>Apples</p>
                        </div>
                        <div id="panel2" class="panel">
                            <h2>Panel 2 content</h2>
                            <p>Mango</p>
                        </div>
                        <div id="panel3" class="panel">
                            <h2>Panel 3 content</h2>
                            <p>Potato</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

.tabbedPanels { width: 70%; float: left; margin-right: 10px; } .tabs { margin: 20; padding: 20; zoom : 1; } .tabs li { float: left; list-style: none; padding: 0; margin: 0; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; } .tabs a { display: block; text-decoration: none; padding: 3px 5px; background-color: rgb(110,138,195); margin-right: 1px; border: 2px solid rgb(153,153,153); margin-bottom: -2px; width: 60px; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; } .tabs .active { border-bottom: 1px solid white; background-color: white; color: rgb(51,72,115); position: relative; } .panelContainer { clear: both; margin-bottom: 25px; border: 1px solid rgb(153,153,153); background-color: white; padding: 10px; } .panel h2 { color: rgb(57,78,121); text-shadow: none; } .panel p { color: black; }

jquery

我正在使用jquery-1.10.2.js。任何人都可以解决我的问题吗？

Answer 1

我的问题解决了。我没有使用.bind方法，而是使用(document).on()方法。我将.js文件替换为以下代码..

$(document).ready(function() {
    //alert('outside');
    //$('.tabs a').bind('click focus',function() {
        $(document).on('click', '.tabs a', function()
                {
        var $this = $(this);
        //alert('?????');
        // hide panels
        $this.parents('.tabbedPanels')
            .find('.panel').hide().end()
            .find('.active').removeClass('active');

        // add active state to new tab
        $this.addClass('active').blur();    

        // retrieve href from link (is id of panel to display)
        var panel = $this.attr('href');
        // show panel
        $(panel).show();
        // don't follow link
        return false;
    }); // end click

    $('.tabs').find('li:first a').click();
}); // end ready

如何使用ajax加载位于不同页面上的jquery选项卡ui

1 个答案: