Question

我目前遇到引导4和控制选项卡的导航的问题。菜单本身看起来不错，但是无论何时选择另一个选项卡，它都将保持选中状态，并且移至另一部分后将无法再次选择它。这意味着访问所有链接后，您将无处可动。不知道我是否缺少某些东西，或者根本不打算那样使用它。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark py-0 mb-2">
  <!--APP NAV START-->
  <ul class="nav nav-tabs mr-2" role="tablist">
    <li class="nav-item dropdown">
      <i class="material-icons md-light md-sm" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;">MENUE</i>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" id="nav-info-tab" data-toggle="tab" href="#nav-info" role="tab" aria-controls="nav-info" aria-selected="false">Info</a>
        <a class="dropdown-item" href="#" aria-selected="false" onclick="openExternal('http://jsfiddle.net/')">jsfiddle/</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" id="nav-sub-tab" data-toggle="tab" href="#nav-sub" role="tab" aria-controls="nav-follower" aria-selected="false">sub</a>
        <a class="dropdown-item" id="nav-subsub-tab" data-toggle="tab" href="#nav-subsub" role="tab" aria-controls="nav-donations" aria-selected="false">subsub</a>
        <a class="dropdown-item" id="nav-subsubsub-tab" data-toggle="tab" href="#nav-subsubsub" role="tab" aria-controls="nav-subscriber" aria-selected="false">subsubsub</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" id="nav-something-tab" data-toggle="tab" href="#nav-something" role="tab" aria-controls="nav-settings" aria-selected="false">something</a>
      </div>
    </li>
  </ul>
  <!--APP NAV END-->
  <div class="ml w-75 dragable">
    <p class="mb-0 text-white">Some Title</p>
  </div>
</nav>


<!--PARTIAL START-->
<div class="container-fluid">
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-info" role="tabpanel" aria-labelledby="nav-info-tab">INFO</div>
    <div class="tab-pane fade" id="nav-sub" role="tabpanel" aria-labelledby="nav-sub-tab">SUB</div>
    <div class="tab-pane fade" id="nav-subsub" role="tabpanel" aria-labelledby="nav-subsub-tab">SUB SUB</div>
    <div class="tab-pane fade" id="nav-subsubsub" role="tabpanel" aria-labelledby="nav-subsubsub-tab">SUB SUB SUB</div>
    <div class="tab-pane fade" id="nav-something" role="tabpanel" aria-labelledby="nav-something-tab">SOMETHING</div>
  </div>
</div>
<!--PARTIAL END-->

Answer 1

您需要重写一些引导程序样式定义才能实现此目的。

首先将“ nav”和“ nav-tabs”类添加到“下拉菜单”

然后添加以下CSS，

DatabaseReference TUidRef = usersRef.child(td);

TUidRef.addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
        ms = dataSnapshot.child("rec_msg").getValue(String.class);
        fUid = dataSnapshot.child("fromUID").getValue(String.class);
        st = dataSnapshot.child("rec_secret").getValue(String.class);

        int km = 0;
        try {
            km = Integer.parseInt(st);
        }
        catch (NumberFormatException e) {
            Log.d("NumberError:", "Can't convert");
        }

        if(ms!=null && !ms.equals(""))
            addMessageBox(ms,km);
        else
            Toast.makeText(Main5Activity.this,"Something went wrong",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onCancelled(@NonNull DatabaseError databaseError) {
        throw databaseError.toException();
    }
});

提琴：http://jsfiddle.net/grrakesh4769/aq9Laaew/191335/

Bootstrap4菜单项保持选中状态，只能单击一次

1 个答案: