CSS Frame / Navbar - ссылки открываются на одной странице в другом кадре - PullRequest
Новая
       6

CSS Frame / Navbar - ссылки открываются на одной странице в другом кадре

0 голосов
/ 06 марта 2020

У меня есть простая веб-страница на основе фреймов, совместимая с 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>

Пожалуйста, помогите!

Спасибо

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Этого можно добиться, используя что-то подобное, но не веб-страницы: 

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

Подробнее о вертикальных вкладках: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

0 голосов
/ 06 марта 2020

Это не работает без использования сторонней библиотеки. То же самое, что я хотел в предыдущем проекте, и в то время я использовал AngularJS концепции маршрутизации. Который является легким, и вам не нужно указывать дополнительные Javascript рамки. Для лучшего понимания смотрите этот урок https://www.youtube.com/watch?v=uF5jiRLRLX8

...