CSS框架/导航栏-在不同框架中的同一页面上打开链接

问题描述 投票：0回答：2

我有一个简单的基于框架的网页，该网页与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
2个回答
0
投票

如果不使用第三方库，它将无法正常工作。在上一个项目中，我想要做同样的事情，那个时候，我使用了AngularJS路由概念。这是轻量级的，您无需指定额外的Javascript框架。为了更好地理解，请观看本教程https://www.youtube.com/watch?v=uF5jiRLRLX8

0
投票

您可以使用类似的方法实现此目的，但不能使用网页：

//codepen.io/kasun/pen/mdJqrVa

有关垂直制表符的更多信息：https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.