2012-11-26 25 views
0

我有一個歷史支持ajax函數,但我想從鏈接加載頁面內容。如何在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); 
});​ 
+2

向我們展示您嘗試過的內容,它可以幫助我們理解您在尋找什麼。 –

+0

以及我想這碼 $(函數(){VAR = current_hash假;! 的setInterval(函數(){ 如果(window.location.hash = current_hash){ current_hash = window.location.hash ; },100); }); },(0;#0;#0; – Avik

+0

很奇怪..........沒有一個成員可以幫助我!真的很鬱悶.. – Avik

回答

0

順便說一句,我發現我的問題的解決方案。我使用jquery地址大師,並解決了我的問題。但另一個問題來了,jQuery的衝突。
我使用
的mootools-蕊compressed.js(對於固定菜單,其僅固定在一個軸上)
jquery.address-1.5.min.js(對於AJAX地址主功能)
jQuery的UI- 1.8.13.custom.min.js(Ajax的地址主功能)
的jquery.js(對於AJAX地址主功能)


和第一(mootools的-銳-compressed.js)和最後(jquery的.js)與彼此衝突。 我試圖

jQuery.noConflict();

,但沒有奏效。
請幫忙。