Fatal编程技术网
  • jquery/
  • 如何使用ajax加载位于不同页面上的jquery选项卡ui

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

jquery ajax jsp tabs

如何使用ajax加载位于不同页面上的jquery选项卡ui,jquery,ajax,jsp,tabs,Jquery,Ajax,Jsp,Tabs,mine是eclipse中使用jsp、ajax和jquery的web项目。它有两个JSP页面-home.JSP和second.JSP。它还有一个单独的css和js文件夹 在second.jsp中，我使用div、ul和a标记将选项卡面板与相应的css和javascript/jquery链接在一起。它作为一个单独的文件平稳运行 在home.jsp中，我想使用JQueryAjax的load（）方法调用second.jsp。因此，为了实现这一点，我将所有css、jquery和javascript链接从s

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

在
second.jsp
中，我使用
div
、
ul
和
a
标记将选项卡面板与相应的
css
和
javascript/jquery
链接在一起。它作为一个单独的文件平稳运行

在
home.jsp
中，我想使用
JQuery
Ajax
的
load（）
方法调用
second.jsp
。因此，为了实现这一点，我将所有
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>

<%@ 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>
样式。css

.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

$(document).ready(function() {
    $('.tabs a').bind('click focus',function() {
        var $this = $(this);

        // 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
我正在使用jquery-1.10.2.js。有人能解决我的问题吗？

我的问题解决了。我没有使用
.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
对不起Inanikian，我花了这么长时间才看到你的回复。但是，兄弟，你的代码片段帮不了我。