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コンテンツを含む3つのフォルダーがあります。

ユーザーがページ 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 を使用します (1 つの軸のみに固定されている固定メニュー用)
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 に答える