Перекрытие вкладок CSS - PullRequest
Новая
       24

Перекрытие вкладок CSS

1 голос
/ 09 июня 2011

в следующем HTML-коде есть образец, использованный из примера 6, который приведен на http://css -tricks.com / examples / CSSTabs / 

<head>
    <style type="text/css">
        .tabview { min-height: 250px; position: relative; width: 100%; }
        .tabview > div { display: inline; }
        .tabview > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
        .tabview > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
        .tabview > div:target > a { background: white; }    
        .tabview > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
        .tabview > div:not(:target) > div { position: absolute }
        .tabview > div:target > div { position: absolute; z-index: -1; }
    </style>
</head>
<body>
    <div class="tabview">
        <div id="tab1">
            <a href="#tab1">Tab 1</a>
            <div>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div id="tab2">
            <a href="#tab2">Tab 2</a>
            <div>2. One might well argue, that...</div>
        </div>
        <div id="tab3">
            <a href="#tab3">Tab 3</a>
            <div>3. One might well argue, that...</div>
        </div>
    </div>
</body>

Проблема в том, что когда на любой вкладке много текста, его конечная часть не скрывается при переключении на другую вкладку.

Например, в приведенном выше коде - конечное содержимое Tab1 видно даже при переключении на другие вкладки.

В другом худшем случае, если на нескольких вкладках много текста - их содержимое перекрывается.

Как это можно решить?

Один из способов решить эту проблему - увеличить min-height в классе tabview. Но в моем приложении содержимое вкладок генерируется в режиме реального времени (из какого-либо веб-сервиса), и я не имею представления об их размере.

Примечание: код работает только в браузере без IE

Ответы [ 2 ]

2 голосов
/ 09 июня 2011

Просто добавьте 

.tabview > div > div
{
overflow: auto;
}

Решает обе проблемы. Конечный текст больше не виден и даже с большим количеством контента не перекрывается.

Fiddle

0 голосов
/ 09 июня 2011

Если вы используете это на реальном веб-сайте, вы определенно не хотите использовать это чистое решение CSS. Помимо того факта, что в IE он не будет работать должным образом, тот факт, что ваша страница перемещается при переключении вкладок, действительно будет откровением для ваших посетителей.

Если бы вы попытались заставить это работать в IE, вам пришлось бы полагаться на решение Javascript. Если вы уже используете решение Javascript для исправления вкладок, вы также можете использовать javascript для управления своими вкладками.

Пожалуйста, ознакомьтесь с JQuery UI Tabs . Намного, намного лучшее решение.

...