Проблема с границами вкладок CSS

ProgramBox

Проблема с границами вкладок CSS

Post author:admin
Запись опубликована:25 апреля, 2023
Post category:Вопросы по программированию

#css

Вопрос:

У меня возникла проблема с определением того, как управлять границами для некоторых вкладок

введите описание изображения здесь

Вы можете увидеть функциональность здесь, на ASP.NET если вы вошли в систему http://forums.asp.net/user/editprofile.aspx #

Вы можете видеть, что при событии onClick цвет фона вкладки меняется на белый, как и предполагалось.

Проблема, с которой я сталкиваюсь, связана с границами для onClick:

Нижняя граница должна измениться с серого цвета на белый. Левая и правая границы должны измениться на серый цвет.

Аналогично, когда вкладка не выбрана: нижняя граница должна измениться с белого на серый. Граница слева и граница справа не должны иметь границы.

В моем CSS я использую как синий, так и белый классы для JavaScript. Однако у меня также есть: .common-heading-tabs a.selected, и это меня сбивает с толку.

Вот моя скрипка — если бы кто-нибудь мог помочь, это было бы здорово http://jsfiddle.net/NinjaSk8ter/ZSeFA

Ответ №1:

Я только что .white немного изменил класс CSS, ваша разметка CSS не была стандартной:

 border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;

Кроме того, чтобы убрать нижнюю границу, у вас есть один из двух вариантов, вы могли бы сделать один из двух

удалите нижнюю границу из .common-heading-tabs a класса и добавьте ее в .blue класс
добавить border-bottom-color:white !important; в .white класс

Причина, по которой вы наблюдали такое поведение, заключалась в том, что стандартная вкладка имела границу (из .common-heading-tabs a ), и когда вы переключились на белый, вы попытались изменить цвет или некоторые границы, но вы использовали border-left-color-value , а не просто border-left-color , а затем вы не изменили границу внизу вкладки для класса white, следовательно, либо переместив объявление нижней границы из .common-heading-tabs a , либо явно раскрасив таблицу. bottom-border-color:white !important

Надеюсь, это поможет!

Редактировать:

Вы просили провести границу между вкладками, если вы хотите изменить класс .left-col и добавить к нему:

 .left-col
{
 border-bottom-color: black;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

Это должно сработать, возможно, вам следует избавиться от границ на других вкладках, если это то, что вы ищете, потому что двойная граница выглядит обалденно.

Дайте мне знать, если я смогу еще чем-нибудь помочь

1. @Brett Я знал, что CSS сильно отличается, и я взял это с сайта-примера. С вашей помощью и Sirvivir я смог заставить это функционировать: jsfiddle.net/NinjaSk8ter/ZSeFA Если вы запустите это, вы увидите часть, которой не хватает внизу? Между кнопками вкладок?

2. @Paul — что я бы сделал, так это добавил некоторый код в div с помощью class left-col , я включу его в свой ответ

3. @Brett не нужно ли мне все еще изменять нижнюю границу? Как вы можете видеть, она распространяется на все вкладки, за исключением той вкладки, которая выбрана.

4. @Paul — разве это не то, чего ты хочешь?

5. @Brett Я считаю, что это сделало свое дело. Я удалил нижнюю границу из синего класса, и теперь она находится только в классе left-col, как вы предложили. Спасибо!!

Ответ №2:

Пример того, как сделать нижнюю границу белой, выглядит следующим образом

 <html>
<head>
<style type="text/css">
p 
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Ответ №3:

У вас происходит какое-то наследование. Добавление явных значений в .blue класс и important в тот, что находится в .white , сработало.

 .blue {   
    background-color: #D7DFEA;
    border-bottom: 1px solid #fff;
    border-top: none;
    border-left: none;
    border-right: none;
}
.white {   
    border-bottom: 1px solid #fff !important;
    border-top: 1px solid #A0AFC3;
    border-left: 1px solid #A0AFC3;
    border-right: 1px solid #A0AFC3;
    background-color: white;
}

Ответ №4:

Проблема, насколько я могу видеть, заключается в том, что, хотя к ссылке применяются оба .common-heading-tabs a и .white , первый является «более конкретным» классом CSS, что означает, что браузер отдает ему приоритет при определении того, какие стили применять.

Если вы хотите убедиться, что .white стиль переопределяет границу, вы можете либо добавить !important к стилю границы:

 .white {   
    background-color: white !important;
    border-bottom-color: #FFFFFF !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    ...
}

или перепроектируйте применение ваших классов таким образом, чтобы изначально не применялись конфликтующие стили границ, что в вашем случае может, например, означать перенос стиля blue border с .common-heading-tabs a на .blue .