jquery - 实现容器内的 CSS 选项卡指示器行为

Question

我正在处理一个项目，我将在其中显示一组在选项卡内设置的相关表格。在这里看小提琴

我遇到问题的地方是指标。您会在页面加载时注意到指示器与选项卡的右侧对齐，并在每个选项卡被激活时进一步向右移动，并且长度不合适。

我已经翻阅了文档，但似乎找不到我所缺少的东西。是否有一些回调或其他需要实现的功能？

这是我的代码：

<div class="col  xb70 clml">
  <div class="row">
    <span class="lhxmst" style="float: left;"><a href="#">BoX Scores</a></span>
    <div class="tcont">
      <ul id="tabs" class="tabs dtin">
        <li class="tab col"><a href="#bxt-1" class="active">Lorem Ipsum</a></li>
        <li class="tab col"><a href="#bxt-2">Consecur</a></li>
        <li class="tab col"><a href="#bxt-3">Aperiamhy</a></li>
        <li class="tab col"><a href="#bxt-4">TDM XND</a></li>
      </ul>
    </div>
    <span class="more" style="float: right;"><a href="#">More</a></span>
    <div id="bxt-1" class="col s12">
      <table class="bxst">
        <tr>
          <th>COL 1</th>
          <th>COL 2</th>
          <th>COL 3</th>
          <th>COL 4</th>
          <th>COL 5</th>
          <th>COL 6</th>
          <th>COL 7</th>
          <th>COL 8</th>
          <th>COL 9</th>
          <th>COL 10</th>
          <th>COL 11</th>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Norma Jean</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">2</td>
          <td id="bxst-run">Good Ol Boy</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">3</td>
          <td id="bxst-run">ASBEAUTIFULASYOURARE</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Ladiesloveconnor</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">5</td>
          <td id="bxst-run">5 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
        <tr>
          <td id="bxst-r">6</td>
          <td id="bxst-run">22 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
      </table>
    </div>
    <div id="bxt-2" class="col s12">
      <table class="bxst">
        <tr>
          <th>Race</th>
          <th>Horse/Post Time</th>
          <th>Surf.</th>
          <th>Class</th>
          <th>Dist.</th>
          <th>Paid</th>
          <th>Finish</th>
          <th>Jockey</th>
          <th>Trainer</th>
          <th>Style</th>
          <th>Replay</th>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Man o' War</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">2</td>
          <td id="bxst-run">California Chrome</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">3</td>
          <td id="bxst-run">War Admiral</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Sweep</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">5</td>
          <td id="bxst-run">4 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
        <tr>
          <td id="bxst-r">6</td>
          <td id="bxst-run">27 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
      </table>
    </div>
    <div id="bxt-3" class="col s12">
      <table class="bxst">
        <tr>
          <th>COL 1</th>
          <th>COL 2</th>
          <th>COL 3</th>
          <th>COL 4</th>
          <th>COL 5</th>
          <th>COL 6</th>
          <th>COL 7</th>
          <th>COL 8</th>
          <th>COL 9</th>
          <th>COL 10</th>
          <th>COL 11</th>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Gone West</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">2</td>
          <td id="bxst-run">Whirlaway</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">3</td>
          <td id="bxst-run">Unbridled</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Sailor</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">5</td>
          <td id="bxst-run">10 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
        <tr>
          <td id="bxst-r">6</td>
          <td id="bxst-run">18 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
      </table>
    </div>
    <div id="bxt-4" class="col s12">
      <table class="bxst">
        <tr>
          <th>COL 1</th>
          <th>COL 2</th>
          <th>COL 3</th>
          <th>COL 4</th>
          <th>COL 5</th>
          <th>COL 6</th>
          <th>COL 7</th>
          <th>COL 8</th>
          <th>COL 9</th>
          <th>COL 10</th>
          <th>COL 11</th>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Gallant Fox</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">2</td>
          <td id="bxst-run">Giacomo</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">3</td>
          <td id="bxst-run">Thunder Gulch</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">1</td>
          <td id="bxst-run">Joe Cotton</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid">6:20</td>
          <td id="bxst-fin">2-5-6-7</td>
          <td id="bxst-jo">Smith, M.</td>
          <td id="bxst-train">Jones, B.</td>
          <td id="bxst-sty">W2W, Inside</td>
          <td id="bxst-vid"><a href="#">play</a></td>
        </tr>
        <tr>
          <td id="bxst-r">5</td>
          <td id="bxst-run">8 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
        <tr>
          <td id="bxst-r">6</td>
          <td id="bxst-run">26 MTP</td>
          <td id="bxst-surf">T</td>
          <td id="bxst-c">MCL</td>
          <td id="bxst-dist">5 1/2F</td>
          <td id="bxst-paid"></td>
          <td id="bxst-fin"></td>
          <td id="bxst-jo"></td>
          <td id="bxst-train"></td>
          <td id="bxst-sty"></td>
          <td id="bxst-vid"></td>
        </tr>
      </table>
    </div>
  </div>

</div>

我的 jQuery：

// Tabs
$(document).ready(function() {
  $('.tabs').tabs();
});

还有我的 CSS：

.clml {
  margin-left: 20px;
}

.xb70 {
  width: 700px;
}

.lhxm a:after,
.lhxmst a:after {
  font-family: icomoon;
  content: "\e90f";
  color: #007FFF;
  position: relative;
  top: 3px;
  left: 2px;
}

.more {
  font-size: 0.750em;
  margin-top: 6px;
}

.tabs .indicator {
  background: #3AB0C8;
  height: 3px;
  top: 30px;
}

.tabs .tab {
  line-height: 32px;
  height: 42px;
}

.tabs .tab a {
  font-size: 1.1em;
  color: #717171;
  padding: 0 12px;
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: #000;
  font-weight: 600;
}

.tcont {
  margin-left: 210px;
}

.dtin {
  display: inline;
}

.more {
  font-size: 0.750em;
  margin-top: 6px;
}

.more a {
  color: #007FFF;
}

.more a:hover {
  color: #000;
}

.bxst {
  border-top: 2px solid #818181;
}

.bxst tr:nth-child(even) {
  background-color: #f2f2f2;
}

.bxst th {
  font-size: 0.75em;
  color: #808080;
}

.bxst td {
  font-size: 0.75em;
  padding: 6px 5px;
}

.bxst #bxst-vid {
  text-align: center;
}

标签： jquerycsshtmlmaterialize

Answer 1

从 li 元素中删除类“col”

<ul id="tabs" class="tabs dtin">
    <li class="tab"><a href="#bxt-1" class="active">Lorem Ipsum</a></li>
    <li class="tab"><a href="#bxt-2">Consecur</a></li>
    <li class="tab"><a href="#bxt-3">Aperiamhy</a></li>
    <li class="tab"><a href="#bxt-4">TDM XND</a></li>
  </ul>