Question

服务器当前正在服务的网页如下：

<html>
<head>
    <meta charset="utf-8">
    <title>Wiki Wiki</title>

    <!-- Demo styling -->
    <link href="docs/css/jq.css" rel="stylesheet">

    <!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->
    <script src="docs/js/jquery-1.2.6.min.js"></script>

    <!-- Pick a theme, load the plugin & initialize plugin -->
    <link href="dist/css/theme.default.min.css" rel="stylesheet">
    <script src="dist/js/jquery.tablesorter.min.js"></script>
    <script src="dist/js/jquery.tablesorter.widgets.min.js"></script>
    <script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns', 'resizable'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
    </script>

</head>
<body> <style> .box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}</style>
    <form method="post" action="wikipedia.php">
    <table border="1" class="tablesorter">
    <colgroup>
       <col span="1" style="width: 5;">
       <col span="1" style="width: 10;">
       <col span="1" style="width: 5;">
    </colgroup>

        <thead>
            <td>value</td>
            <td>user input</td>
            <td>url</td>
        </thead><tr><td><input type="hidden"
     name="tagName[0]" value="diagnoses">diagnoses</td><td><input type="text"
     name="userValue[0]" value="zNIL"></td><td><input type="hidden"
     name="tagValue[0]" value="/wiki/Medical_diagnosis"><a href="http://en.wikipedia.org/wiki/Medical_diagnosis">/wiki/Medical_diagnosis</a><div class="box"><embed src="http://en.wikipedia.org/wiki/Medical_diagnosis" width = "500px" height = "500px"></embed></div></td><tr/><tr><td><input type="hidden"
     name="tagName[1]" value="procedures">procedures</td><td><input type="text"
     name="userValue[1]" value="zNIL"></td><td><input type="hidden"
     name="tagValue[1]" value="/wiki/Medical_procedure"><a href="http://en.wikipedia.org/wiki/Medical_procedure">/wiki/Medical_procedure</a><div class="box"><embed src="http://en.wikipedia.org/wiki/Medical_procedure" width = "500px" height = "500px"></embed></div></td><tr/><tr><td><input type="hidden"
     name="tagName[2]" value="health care">health care</td><td><input type="text"
     name="userValue[2]" value="zNIL"></td><td><input type="hidden"
     name="tagValue[2]" value="/wiki/Health_care"><a href="http://en.wikipedia.org/wiki/Health_care">/wiki/Health_care</a><div class="box"><embed src="http://en.wikipedia.org/wiki/Health_care" width = "500px" height = "500px"></embed></div></td><tr/><tr><td><input type="hidden"
     name="tagName[3]" value="Diagnosis codes | Diagnostic codes | Diagnostic codes">Diagnosis codes | Diagnostic codes | Diagnostic codes</td><td><input type="text" name="userValue[3]" size="20" value="completed"></td><tr/><tr><td><input type="hidden"

     ...

     </table>
    <p>
        <input type="submit" value="Submit">
    </p>
</form>

如您所见，其中有一个<table>。在其中一列中，用户可以将鼠标悬停在各种链接上，并且链接所链接的页面将在页面上弹出，以允许用户预览。这是使用<embed>元素完成的。我从@ user3347064的答案中得到了这个想法： How to show live preview in a small popup of linked page on mouse over on link?

现在，弹出窗口出现在相关的<td>元素中。相反，我希望将网页分成两半（很像一本书）。一半将显示<table>，另一半将包含所有<embed>元素。然后，当用户将鼠标悬停在链接上时，相关的<embed>元素仅会弹出一半。用户应该能够在每一半中滚动。因此，这非常像两个彼此并排的标签/窗口。看起来很相关：How to split webpage into "sections" 但是，答案似乎并不支持滚动。

我该怎么做？

此外，到目前为止，当用户的光标离开链接时，popup / <embed>元素也会消失。但是，可以使<embed>保持可见状态，直到将鼠标移到下一个链接上为止，然后将其替换为现有<embed>的视图。

**如果可能，请避免使用Javascript。但是，如果无法做到这一点，那么Javascript仍然可以，但是希望使用易于实现的解决方案。

将网页拆分为可滚动的部分，并在一个部分中实时预览链接

0 个答案: