使用框架和可扩展列表时，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不起作用

回答

相关问题