Question

我正在为菜单中的活动标签添加一个项目符号。这就是脚本的样子：

$(document).ready(function() {

    //add class active to a tab based on url
    switch (window.location.pathname) {
      case '/admin/statistics':
        $('#statistics').addClass('is-active bulletpoint');
        break;
      case '/admin/articles':
        $('#articles').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
        break;
      case '/admin/users':
        $('#users').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
        break;
      case '/admin/articles/create':
        $('#create').addClass('is-active bulletpoint');
        break;
      case '/admin/notifications/create':
        $('#notification').addClass('is-active bulletpoint');
        break;
      }
});

.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}

.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

.bulletpoint {
  list-style-type: disc;
  list-style-position: inside;
  color: #FFFFFF;
  height: 100%;
  line-height: 1;
}

.tabs-title > a {
    display: block;
    padding: 1.25rem 1.5rem;
    line-height: 1;
    font-size: 0.75rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<ul class="tabs">
  <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">Nytt inlegg</a></li>
  <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">Mine innlegg</a></li>
  @if (Auth::user()->hasRole('admin'))
      <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistikk</a></li>
      <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Brukere</a></li>
      <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">Nytt melding</a></li>
  @endif
</ul>

那么，bullepoint会被添加但是没有垂直对齐，不确定如何实现它以使它保留在标签内？

我尝试了各种组合，但没有一种能够奏效。

Answer 1

其他一切看起来很好只是在你的CSS改变

display: block;选择器的

.tabs-title > a属性

到display: inline-block;

.tabs-title > a {
   display: inline-block;
   padding: 1.25rem 1.5rem;
   line-height: 1;
   font-size: 0.75rem;
}

$('.tabs-title').on('click',function() {
        $('.tabs-title').removeClass('is-active bulletpoint');
        $(this).addClass('is-active bulletpoint');
});

.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}

.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

.bulletpoint {
  list-style-type: disc;
  list-style-position: inside;
  color: #FFFFFF;
  height: 100%;
  line-height: 1;
}


.bulletpoint {
  list-style-type: disc;
}

.tabs-title > a {
    display: inline-block;
    padding: 1.25rem 1.5rem;
    line-height: 1;
    font-size: 0.75rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tabs">
  <li class="tabs-title is-active bulletpoint" id="create"><a>Nytt inlegg</a></li>
  <li class="tabs-title" id="articles"><a>Mine innlegg</a></li>
      <li class="tabs-title" id="statistics"><a>Statistikk</a></li>
      <li class="tabs-title" id="users"><a>Brukere</a></li>
      <li class="tabs-title" id="notification"><a>Nytt melding</a></li>
</ul>

<强>更新

如果您希望li彼此相邻。

将li包裹在像这样的div中

<ul class="tabs">
  <div><li class="tabs-title is-active bulletpoint" id="create"><a>Nytt inlegg</a></li></div>
  <div><li class="tabs-title" id="articles"><a>Mine innlegg</a></li></div>
  <div><li class="tabs-title" id="statistics"><a>Statistikk</a></li></div>
  <div><li class="tabs-title" id="users"><a>Brukere</a></li></div>
  <div><li class="tabs-title" id="notification"><a>Nytt melding</a></li></div>
</ul>

现在添加此css

.tabs div{
   display:inline-block;
   width:auto;
}

$('.tabs-title').on('click',function() {
        $('.tabs-title').removeClass('is-active bulletpoint');
        $(this).addClass('is-active bulletpoint');
});

.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
  list-style-position: inside;
  list-style-type: none;
  color: #FFFFFF;
}

.tabs div{
  display:inline-block;
  width:auto;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}


.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

.bulletpoint {
  padding-left:10px;
  list-style-type: disc;
}

.tabs-title > a {
    display:inline-block;
    padding: 1.25rem 1.5rem;
    line-height: 1;
    font-size: 0.75rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tabs">
  <div><li class="tabs-title is-active bulletpoint" id="create"><a>Nytt inlegg</a></li></div>
  <div><li class="tabs-title" id="articles"><a>Mine innlegg</a></li></div>
  <div><li class="tabs-title" id="statistics"><a>Statistikk</a></li></div>
  <div><li class="tabs-title" id="users"><a>Brukere</a></li></div>
  <div><li class="tabs-title" id="notification"><a>Nytt melding</a></li></div>
</ul>

Answer 2

以下是答案..

<强> JS

<script>
    $(document).ready(function () {
        //add class active to a tab based on url
        switch (window.location.pathname) {
            case '/admin/statistics':
                $('#statistics').addClass('is-active bulletpoint');
                break;
            case '/admin/articles':
                $('#articles').addClass('is-active bulletpoint');
                $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
                break;
            case '/admin/users':
                $('#users').addClass('is-active bulletpoint');
                $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
                break;
            case '/admin/articles/create':
                $('#create').addClass('is-active bulletpoint');
                break;
            case '/admin/notifications/create':
                $('#notification').addClass('is-active bulletpoint');
                break;
        }
    });
</script>

<强> HTML

<ul class="tabs">
    <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">Nytt inlegg</a></li>
    <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">Mine innlegg</a></li>
    @if (Auth::user()->hasRole('admin'))
    <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistikk</a></li>
    <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Brukere</a></li>
    <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">Nytt melding</a></li>
    @endif
</ul>

<强> CSS

<style>
    .tabs {
        background-color: #353A41;
        border: 0;
        height: 56px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tabs > li{

        display: inline-block;
    }
    .tabs a{
        color: #FFFFFF;
        font-size: 17px;
    }

    .tabs a:hover, .is-active {
        background-color: #2A2E34;
    }

    .bulletpoint {
        list-style-type: disc;
        list-style-position: inside;
        color: #FFFFFF;
        height: 100%;
        line-height: 1;
    }

    .tabs-title > a {
        display: block;
        padding: 1.25rem 1.5rem;
        line-height: 1;
        font-size: 0.75rem;
    }

</style>

我希望它对你有所帮助..

Answer 3

我认为更清洁的解决方案是使用伪元素来简单地添加正确的样式。

<强> HTML

<ul class="tabs">
  <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}">Nytt inlegg</a></li>
  <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}">Mine innlegg</a></li>
  @if (Auth::user()->hasRole('admin'))
      <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}">Statistikk</a></li>
      <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}">Brukere</a></li>
      <li class="tabs-title" id="notification"><a href="{{ url('/admin/notifications/create') }}">Nytt melding</a></li>
  @endif
</ul>

<强> CSS

.tabs {
  background-color: #353A41;
  border: 0;
  height: 56px;
}

.tabs a{
  color: #FFFFFF;
  font-size: 17px;
}

.tabs a:hover, .is-active {
  background-color: #2A2E34;
}

// we remove styling for the actual class and only apply to the pseudo-element
.bulletpoint::after {
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #fff;
  right: 10px; // small padding
  top: 50%; // centered
  transform: translateY(-50%); // to adjust vertically
}

// we add position: relative to .tabs-title so that the bullets depend on their parent element.
.tabs-title {
  position: relative;
}

.tabs-title > a {
    display: block;
    padding: 1.25rem 1.5rem;
    line-height: 1;
    font-size: 0.75rem;
}

现在，添加项目符号所需要做的就是在您可能需要的任何.bulletpoint元素上切换.tabs-title类。请注意代码本身内每条规则的详细说明。

Answer 4

我认为您的基础css在此处覆盖了您的用户代理样式。

请确保执行以下操作：

ul {
    list-style-type: disc;
}

要覆盖基础的样式，请使用list-style-type: disc !important;

更新了小提琴：https://jsfiddle.net/nashcheez/8yoL5pvy/4/

添加屏幕截图：

CSS - 将bulletpoint添加到活动选项卡，垂直对齐并保留在选项卡问题中

4 个答案: