CSS Frame / Navbar - 链接在不同框架中的同一页面上打开答案

【问题标题】：CSS Frame / Navbar - Links Open on Same Page In A Different FrameCSS Frame / Navbar - 链接在不同框架中的同一页面上打开
【发布时间】：2020-06-19 09:59:50
【问题描述】：

我有一个简单的基于“框架”的网页，兼容 HTML5，使用一些简单的 CSS 编写。

我正在努力解决使链接在同一网页中打开的部分。

基本上，当我单击左侧框架（绿色区域）列表中的链接时，我希望它在右侧框架（灰色区域）中打开。

这是我现在的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My CSS Browser</title>
    <style type="text/css">

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%; 
        max-height: 100%; 
        font-family:Arial;
        line-height: 1.5em;
    }

    #header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px; 
        overflow: hidden;
        background: #476bff;
    }

    #nav {
        position: absolute; 
        top: 100px; 
        left: 0; 
        bottom: 0;
        width: 230px;
        overflow: auto;
        background: #8affc6;        
    }

    #logo {
        padding:10px;
        margin-left: auto;
    }

    main {
        position: fixed;
        top: 100px;
        left: 230px; 
        right: 0;
        bottom: 0;
        overflow: auto; 
        /*background: #8affc6;*/
        background: #ffffff
    }

    .innertube {
        margin: 15px;
    }

    p {
        color: #555;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    nav ul a {
        color: darkgreen;
        text-decoration: none;
    }

    * html body{
        padding: 100px 0 0 230px; 
    }

    * html main{ 
        height: 100%; 
        width: 100%; 
    }
    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    </style>


</head>

<body>      

    <header id="header">
        <div id="logo">
        </div>
    </header>

    <main id="main">
        <div class="innertube">
            <h1>Website Displays Here</h1>
        </div>
    </main>

    <nav id="nav">
        <div class="innertube">
            <h1>Heading</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
            <h1>Heading</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
            <h1>Heading</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
    </nav>  
</body>

请帮忙！

谢谢

【问题讨论】：

标签： html css frame

【解决方案1】：

如果不使用第三方库，它就无法工作，我在之前的项目中想要同样的东西，而那个时候，我使用了 AngularJS 路由概念。这是轻量级的，您无需指定额外的 Javascript 框架。为了更好地理解这个教程https://www.youtube.com/watch?v=uF5jiRLRLX8

【讨论】：

【解决方案2】：

你可以通过使用类似这样的东西来实现这一点，但不是网页：

//www.codepen.io/kasun/pen/mdJqrVa

更多关于垂直标签：https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

【讨论】：