Question

我的网站包含两个框架。一个在左侧，用于目录，另一个在右侧。左边的目录是一个可扩展的列表，我使用jquery实现。每个最终的子节点都是另一个html的超链接，它将在右边的框架中打开。

左框架的代码如下

<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>

我遇到的问题是Add in house href。单击时引入的href工作完美。另一方面，当我点击添加内部时，它不会在右框架上打开。如果我选择在新窗口中打开它会完美打开。有什么想法吗？

**编辑更好地解释我想要做的事情这个link会导致apache ant用户手册。我正在尝试为我的应用程序创建一个完全相同的用户手册。两者之间的唯一区别是我的目录是一个可扩展的列表，而在apache ant用户手册中点击一个类别重新加载目录的内容与类别的内容而不是扩展集类别这是我想要的做。我的问题是可扩展列表的内部列表内容中的href链接实际上不起作用

基本目标代码的工作原理是mainFrame不需要在内容html的同一文档中。它位于运行左框架的父框架内

Answer 1

答案：您正在使用基本标记来告知您用于链接的帧目标。但是文档中没有名称为“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');
});

Answer 2

事实证明我遇到这个问题的原因是我的jquery代码正在搞乱href链接。我用更简单的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>

使用框架和可扩展列表时，href将不起作用

2 个答案: