側邊欄菜單選項卡從HTML到jQuery

我希望這段代碼包含一些jQuery，以便當我按下側邊欄菜單上的一個選項卡時，它會顯示在同一頁面上的容器中的數據，而無需刷新頁面。我嘗試過這樣做，但是他們都沒有爲我工作。側邊欄菜單選項卡從HTML到jQuery

<div class="container-fluid"> 
    <h3>Your Profile <h5> Landlord </5></h3> 
    <ul class="nav nav-pills nav-stacked" style="width:300px;"> 
    <li><a href="#">Personal Information</a></li> 
    <li> <a class="dropdown-toggle" data-toggle="dropdown" href="landlord_profile.php"> My Properties <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="landlord_addproperty.php">Add a Property</a></li> 
     <li><a href="#">Edit your properties</a></li> 
    </ul> 
    </li> 

    <li><a href="#">Upload Profile Image</a></li> 
    <li><a href="deactivate_myaccount.php">Deactivate My Account</a></li> 
    <li><a href="#"> Change Password </a></li> 


    </ul> 
</div>

來源

2016-03-27 JackDaniels

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>New Graph api & Javascript Base FBConnect Tutorial | Thinkdiff.net</title> 
</head> 
<body> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 
function call(page) 
{ 
    $("#result").load(page); 
} 
</script> 
<div class="container-fluid" style="width:40%;float:left;"> 
<h3>Your Profile <h5> Landlord </5></h3> 
<ul class="nav nav-pills nav-stacked" style="width:300px;"> 
<li><a href="javascript:;" onclick="call('test.html');">Personal Information</a></li> 
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" onclick="call('test.html');"> My Properties <span class="caret"></span></a> 
<ul class="dropdown-menu"> 
    <li><a href="javascript:;" onclick="call('test.html');">Add a Property</a></li> 
    <li><a href="javascript:;" onclick="call('test.html');">Edit your properties</a></li> 
</ul> 
</li> 

<li><a href="javascript:;" onclick="call('test.html');">Upload Profile Image</a></li> 
<li><a href="javascript:;" onclick="call('test.html');">Deactivate My Account</a></li> 
<li><a href="javascript:;" onclick="call('test.html');"> Change Password </a></li> 


    </ul> 
</div> 
<div id="result" style="width:60%;float:left;">sdsdsdsd</div> 
</body> 
</html>

來源

2016-03-28 09:28:57

我在這裏提供了一個希望對你有用的示例代碼。 test.html頁面只包含右側html –

感謝您的代碼。我已將頁面鏈接到各自的選項卡，但是當我按下選項卡時，它不顯示在框中。 – JackDaniels

看看我們基本上在這裏做了什麼，我們只需要在頁面名稱作爲參數點擊每個標籤時調用一個函數。 jQuery加載函數調用該頁面並替換結果id html代碼。所以確保你有插入請求數據到有效的ID。請與我共享至少一頁代碼。所以我可以更有效地幫助你。 –

嗯，我沒有得到你的完整問題，但正如我所瞭解的，它是從側邊欄菜單中鏈接頁面的問題。如果你發帖的菜單代碼可能會讓我很好理解。

來源

2016-03-27 22:39:40

我已經包括工具欄菜單上面的代碼 – JackDaniels

有此鏈接可能會有所幫助[CSS技巧]看看（https://css-tricks.com/ajax-load-container-contents/） –

側邊欄菜單選項卡從HTML到jQuery

回答

相關問題