我的是一个使用jsp,ajax和jquery的eclipse中的Web项目。 它有两个JSP pages- home.jspsecond.jsp 它还具有单独的cssjs文件夹。

second.jsp我已经并入使用标签面板divula由具有适当连接它们的标签cssjavascript/jquery 作为单独的文件,它运行平稳。

home.jsp我想使用JQuery Ajaxload()方法调用second.jsp 因此,为了实现这一点,我将所有我的cssjqueryjavascript链接从second.jsphome.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

<%@ 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>

styles.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。 谁能解决我的问题?

===============>>#1 票数:0

我的问题解决了。 代替使用.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

  ask by JPG translate from so

未解决问题?本站智能推荐:

2回复

重新加载jQuery选项卡会导致重复的事件触发

我有一些jquery选项卡,其中一些是通过ajax加载的。 第一次加载它们很好时,事件将按需触发一次,但是当我单击另一个选项卡,然后返回到由ajax加载的选项卡时,jquery事件被触发两次,随后加载该选项卡,然后添加另一个事件。似乎jquery一次又一次地被加载,但是当我在chrome上检查
2回复

使用ajax加载文档片段的JQuery UI选项卡

我正在使用JQuery UI选项卡,并希望从生成的页面加载片段。 但是,整个页面都已加载。 这是代码: 有这么简单的方法吗? Tabs插件是使用.load()还是.get()ajax调用?
1回复

如何使用jQuery UI选项卡通过Ajax加载外部div

我正在使用Jquery UI选项卡功能通过Ajax加载内容。 我想在ajax调用中加载特定的div,而不是整个页面。 不使用jQuery的load()是否可能? 从代码中可以看到,这是一个标准的基本jQuery选项卡实现,但是我想要一个特定的div而不是整个页面。 这是我的htm
3回复

如何在jQuery UI Tab中重新加载AJAX内容

我正在尝试将Ajax内容刷新到jQuery UI选项卡中。 我见过很多人问,并提出了很多解决方案(尽管他们都不完整或不起作用),所以再说一次……这是怎么做的? 这是我所拥有的: .... 我什至愿意接受对ajax调用的JSON响应,但是简单地重新加载选项卡就足够了。
1回复

使用jQuery ajax标签时,如何防止页面跳转?

我感谢这个主题上有很多问题,并且我怀疑有些问题与我想要的非常接近,例如JQuery UI选项卡导致屏幕“跳转” 阻止jquery TABS在单击时跳转/向上滚动? jQuery标签:如何停止点击跳转? 但我还没有找到能完全解决我问题的方法... 我已经实现了jQuery Ta
1回复

使用jQuery AJAX和PHP将数据加载到动态创建的标签中

我的情况如下: PHP脚本从数据库检索数据。 此信息显示在第一个选项卡中。 此选项卡将始终站立且无法关闭。 很好,请参阅代码。 双击创建一个动态选项卡,该选项卡从与此ID关联的数据库中检索其他数据。 这也很好,将创建一个新的TAB并检索数据。 }); 从这里开
2回复

jQuery ui选项卡:所有选项卡都显示相同的内容

我正在遵循jQuery-ui网页中发布的简单示例来实现一些标签,但是我遇到的问题是,所有3个div内容都显示在要显示的3个标签中的每个标签上(正确显示的唯一内容是标签的名称) 。 我页面上的完整JSP / HTML代码是这样的: 有人对此问题有任何线索吗?
1回复

如何将新的Ajax内容加载到JQuery UI Tabs插件中已打开的[selected]标签中?

例如: 我创建了一个新的空白标签,并通过添加新标签按钮来动态显示空白内容。就像firefox和chrome一样 ,单击添加新标签以创建一个新的标签浏览器窗口。 然后,我单击其他链接以将内容加载到新创建或当前选定的选项卡。* 例如 *: 选择 Tab1后,我单击link3并将link
2回复

iframe,外部页面和jQuery ui标签页

我有一个带有多个标签的页面。 每个选项卡都包含另一个网页的内容(位于同一服务器上,但位于不同的目录中,并且它们都是独立的站点)。 选项卡式页面的目的是将其他页面集中在一个门户中。 在某种程度上,这很有效。 这种方法的问题在于,我必须使用iframe加载其他页面以保留其CSS和相对图像路径
1回复

标签中的jQuery UI Tabs问题加载链接

jQuery UI选项卡有问题。 详细地讲,我有一些用ajax加载的选项卡,我的问题是我想在页面内加载页面链接,但我做不到。 这是带有标签的页面代码: 让我们假设我已经加载了选项卡订阅。 subscription.php具有指向另一个页面的链接,我想在同一选项卡中加载该页面。