0

我有一个支持历史记录的 ajax 函数，但我想从链接加载页面内容。

这是我的 index.html

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src="jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="tabs-no-images.css"/>
</head>
<body>
<ul class="css-tabs">
  <li><a href="ajax1.htm">Tab 1</a></li>
  <li><a href="ajax2.htm">Second tab</a></li>
  <li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>

<div class="css-panes">
  <div style="display:block"></div>
</div>

<script>
  $(function() {
      $("ul.css-tabs").tabs(
      "div.css-panes > div",
      {effect: 'ajax', history: true}
    );
    });
</script>
</body>
</html>

和我的 CSS

/* root element for tabs  */
ul.css-tabs {
    margin:0 !important;
    padding:0;
    height:30px;
    border-bottom:1px solid #666;
}

/* single tab */
ul.css-tabs li {
    float:left;
    padding:0;
    margin:0;
    list-style-type:none;
}

/* link inside the tab. uses a background image */
ul.css-tabs a {
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px;
    text-decoration:none;
    border:1px solid #666;
    border-bottom:0px;
    height:18px;
    background-color:#efefef;
    color:#777;
    margin-right:2px;
    position:relative;
    top:1px;
    outline:0;
    -moz-border-radius:4px 4px 0 0;
}

ul.css-tabs a:hover {
    background-color:#F7F7F7;
    color:#333;
}

/* selected tab */
ul.css-tabs a.current {
    background-color:#ddd;
    border-bottom:1px solid #ddd;
    color:#000;
    cursor:default;
}


/* tab pane */
.css-panes div {
    display:none;
    border:1px solid #666;
    border-width:0 1px 1px 1px;
    min-height:150px;
    padding:15px 20px;
    background-color:#ddd;
}

和 jquery.tools.min

我有三个包含 ajax 内容的文件夹。

我希望，当用户转到页面 index.html 时，他们可以将任何页面（ajax1.htm 或 ..）的内容视为默认内容。所以我的问题是如何通过添加额外代码来处理我当前的代码？

并请描述要编辑的内容以及放置外部代码或其他内容的位置。

评论中的代码：

$(function() {
    var current_hash = false;
    setInterval(function() {
        if (window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("ajax1.htm?page=" + current_hash);
        }
    }, 100);
});​
4

1 回答 1

0

顺便说一句，我找到了我的问题的解决方案。我使用 jquery 地址大师，这解决了我的问题。但是另一个问题来了，jquery 冲突。
我使用
mootools-yui-compressed.js（用于固定菜单，仅固定在一个轴上）
jquery.address-1.5.min.js（用于ajax地址主功能）
jquery-ui-1.8.13.custom.min。 js（用于ajax地址主函数）
jquery.js（用于ajax地址主函数）


和第一个（mootools-yui-compressed.js）和最后一个（jquery.js）相互冲突。我试过了

jQuery.noConflict();

但它没有用。
请帮忙。

于 2012-12-01T08:06:41.073 回答