使用框架和可擴展列表時，href不起作用

-1

我有一個包含兩個框架的網站。目錄左側爲一個，右側爲一個。左側的目錄是一個可擴展的列表，我使用jQuery實現。每個最終的孩子都是另一個HTML的超鏈接，它將在右邊的框架中打開。使用框架和可擴展列表時，href不起作用

左幀中的代碼如下

<html> 

<head> 
<meta http-equiv="Content-Language" content="en-us"/> 
<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<title>User Manual</title> 
<base target="mainFrame"/> 
</head> 

<body> 

<h2>Table of Contents</h2> 
<div class="listContainer"> 
<ul class="expList" id="expList"> 
<li><a href="intro.html">Introduction</a></li> 

     <li>Main Screen 
      <ul> 
      <li> 
       <a href="addInHouse.html">Add In-House Client</a> 
      </li> 

      </ul> 
      </li> 
     </ul> 
</div> 
<script> 
function prepareList() { 
    $('#expList').find('li:has(ul)') 
    .click(function(event) { 
     if (this == event.target) { 
      $(this).toggleClass('expanded'); 
      $(this).children('ul').toggle('medium'); 
     } 
     return false; 
    }) 
    .addClass('collapsed') 
    .children('ul').hide(); 
    }; 

    $(document).ready(function() { 
     prepareList(); 
    }); 
    </script> 
</body> 
</html>

父HTML中包含兩幀如下

<html> 
<head> 

    <title>User Manual</title> 
<head> 
<frameset border="10" cols="20%,80%" frameSpacing="10"> 
<frame name="navFrame" src="contents.html"> 
<frame name="mainFrame" src="main.html"> 
</frameset> 
</html>

，我遇到的問題是與代碼加入href。點擊時的介紹href完美無缺。另一方面，當我點擊添加內部時，它不會在右邊的框架上打開。如果我選擇在新窗口中打開，它會完美打開。有什麼想法？

**編輯爲了更好地解釋我正在嘗試做什麼這個link導致apache ant用戶手冊。我正在嘗試爲我的應用程序創建一個用戶手冊，其工作方式完全相同。兩者之間唯一的區別是，我的目錄是一個可擴展的列表，而在apache ant用戶手冊中點擊一個類別重新加載目錄的內容與類別的內容，而不是擴大設置類別，這正是我想要的做。我的問題是可擴展列表的內部列表內容中的href鏈接實際上並不工作

基本目標代碼的工作原因是mainFrame不需要位於html內容的同一文檔中。它位於左邊框架正在運行的父框架內

來源

2014-09-05 John Demetriou

無論用戶在哪裏都可以隨時查看內容列表。整個網站將作爲我正在開發的應用程序的用戶手冊工作。 – 2014-09-05 09:00:56

職位：固定;會做這個工作 – Pinoniq 2014-09-05 09:01:50

你是什麼意思？用戶將點擊不同的鏈接，打開不同的html頁面，每個頁面記錄應用程序的某個部分。我正在使用框架，因此不同的html頁面只會在右框架中打開，而html目錄留在左側 – 2014-09-05 09:03:46

事實證明我是有這種情況的原因問題是我搞亂了href鏈接的jQuery代碼。我使用更簡單的javascript代碼替換了可擴展列表的jquery代碼

  <li> 
      <a href="#" onclick="swap('MainScreen');return false;">Main Screen</a> 
      <ul id="MainScreen" style="display: none;"> 

      <li> 
       <a href="addInHouse.html">Add In-House Client</a> 
      </li> 
      </ul> 
      </li> 

<script> 
function swap(targetId){ 
    if (document.getElementById){ 
     target = document.getElementById(targetId); 
      if (target.style.display == "none"){ 
       target.style.display = ""; 
      } else{ 
       target.style.display = "none"; 
      } 

    } 
} 
    </script>

來源

2014-09-05 11:32:10

答案：您正在使用基本標記來說明您用於鏈接的幀對象。但名稱爲「mainframe」的框架在文檔中不可用。

但是：

這裏真正的問題是幀的使用。 IMsOP gives some good reasons。

這裏沒有任何關於框架的問題。你真正需要的是一個固定的側邊欄和內容可以滾動：

<div id="sidebar"></div><!-- should be fixed --> 
<div id="content"></div><!-- should be scrollable -->

我們都可以做到這一點與CSS

#sidebar { 
    position: fixed; 
    width:20%; 

    height: 400px; 
    background:#333; 
} 

#content { 
    position: relative; 
    width: 80%; 
    float:right; 

    height:2000px; 
    background: #ddd; 
}

我增加高度和BG的元素作爲一個例子。

現在我們可以開始添加一些語法糖。例如可摺疊側欄：

<div id="container"> 
    <div id="sidebar"></div><!-- should be fixed --> 
    <div id="content"></div><!-- should be scrollable --> 
</div>

與添加的CSS：

.small-sidebar #sidebar { 
    width:5%; 
} 
.small-sidebar #content{ 
    width:95%; 
}

和Javascript來切換較小的邊欄：

jQuery('#sidebar').on('click', function() { 
    jQuery('#container').toggleClass('small-sidebar'); 
});

來源

2014-09-05 09:24:16 Pinoniq

，並且此代碼會將邊欄保留爲用戶瀏覽內容時的內容列表？ – 2014-09-05 09:36:33

我喜歡側欄設計。但是我所看到的我無法用側邊欄來完成。我想在邊欄旁打開不同的html文件。我怎樣才能做到這一點？ – 2014-09-05 09:43:27

基本目標代碼的工作原理是mainFrame不需要位於內容html的同一文檔中。它位於左框架正在運行的父框架內部 – 2014-09-05 09:52:01

使用框架和可擴展列表時，href不起作用

回答

相關問題