jQuery的 - 在当前标签，而不是离开页面

打开链接，我很新的jQuery和我需要你帮忙以下：jQuery的 - 在当前标签，而不是离开页面

我有一个包含jQuery的标签文件“mainPage.jsp”目前只有一个标签。此选项卡的内容是一个包含的jsp文件users.jsp，它构建了一个用户表。每个用户行包含其中包含以下链接“详细信息”栏：

<a href="userDetails.jsp?userid=<%=user.getUserID()%>" style="color: blue;">Details</a>

当用户点击，而不是改变页面此链接我希望新的内容，在当前选项卡中呈现的，（这是目前它所做的）。

有关于如何做到这一点下面的链接解释，但我想我做错了什么：

open links in the current tab instead of leaving the page

我mainPage.jsp：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Users</a></li> 
    </ul> 

    <div id="tabs-1"> <jsp:include page="users.jsp" /> </div> 

</div>

此页面的脚本：

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#tabs').tabs(); 
    $('#tabs').on('click', 'a', function(event) { 
     $.get($(this).attr('href'), function (response){ 
      $(this).parent().html(response); 
      event.preventDefault(); 
     }); 
    }); 
}); 
</script>

也试过：

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#tabs').tabs(); 
    $('#tabs').on('click', 'a', function(event) { 
     $(ui.panel).load(this.href); 
     event.preventDefault(); 
     }); 
}); 

</script>

这是出现一个链接（运行JSP后）：

<a href="userDetails.jsp?userid=14" style="color: blue;">Details</a>

什么想法？

谢谢！

来源

2012-04-04 Blue

似乎一切都OK了我。唯一让我想到的是，之前发生了一些'JS'错误，并停止了进一步的执行（即防止默认的点击事件）。你检查过“Firebug”的错误吗？ – 2012-04-04 18:53:45

– zod 2012-04-04 18:55:33

看起来像ui.panel不存在。 @jperovic是对的，在脚本重写默认链接动作之前查找可能发生的Javascript错误。仅供参考，delegate（）已被弃用，并且jQuery建议使用on（）前进http://api.jquery.com/on/ – 2012-04-04 19:06:21

如何：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#tabs').tabs(); 
     $('#tabs').on('click', 'a', function(event) { 
      event.preventDefault(); 
      $.get($(this).attr('href'), function (response){ 
       $(this).parent().html(response); 
      }); 
     }); 
    }); 
</script>

来源

2012-04-04 19:24:05 Relic

现在链接什么都不做，但可能会有进展，因为现在当我按下链接时，它实际上停止了调试（你可以阅读我上面的评论，它之前没有这样做）。 – Blue 2012-04-04 19:30:45

找到了解决方案，这应该是脚本：

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#tabs').tabs({ 
     load: function(event, ui) { 
      $(ui.panel).delegate('a', 'click', function(event) { 
       $(ui.panel).load(this.href); 
       event.preventDefault(); 
      }); 
     } 
    }); 

    $("#tabs").bind('tabsselect', function(event, ui) { 
     window.location.href=ui.tab; 
    }); 

}); 

</script>

而且它的用法：

<div id="tabs"> 
     <ul> 
      <li><a href="users.jsp"><span>Users</span></a></li> 
      <li><a href="conference.jsp"><span>Conferences</span></a></li> 
      <li><a href="companies.jsp"><span>Companies</span></a></li> 
     </ul> 
</div>

这为什么内容，例如，第一个选项卡是users.jsp。在usrs.jsp我使用link：

<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>

，并单击时在同一标签userDetails.jsp现在打开。

来源

2012-04-15 08:57:08 Blue

跑过这和以前的答案没有帮助，但这并：

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      load: function (event, ui) { 
       $('a', ui.panel).live('click', function() { 
        $(ui.panel).load(this.href); 
        return false; 
       }); 
      } 
     }); 
    }); 
<script>

来源

2012-08-09 22:29:45 dsp4774

jQuery的 - 在当前标签，而不是离开页面

回答

相关问题