How to make a link that is not the focus looked faded?

时间：2018-04-20 21:21:58

标签： html css twitter-bootstrap

So I have two html forms that are combined into one view and can be selected through tabs (I'm using bootstrap panel-tabs to accomplish this). I was wondering how to via css if possible make the inactive tab link look faded and then when you click on it and it becomes the focus the other tab becomes faded.

HTML:

<div class="col-12 col-sm-6 form card z-depth-3">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active find-pad-border"><a href="#findPartTitle" data-toggle="tab" class="find-tab"><h4>Find a participant</h4></a></li>
                <li class="find-pad"><a href="#findTeamTitle" data-toggle="tab" class="find-tab"><h4>Search for a team</h4></a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="findPartTitle">
                    <div>
                        <form id="findFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type" value="participant">
                            <input type="hidden" id="fr_id_participant" name="fr_id" value="[[S334:fr_id]]">
                            <input type="hidden" id="pg" name="pg" value="pfind">
                            <input type="hidden" id="submit" name="submit" value="true">
                            <i>First Name</i>
                            <input class="form-control" type="text" size="20" name="searchFirstName" id="searchFirstName" maxlength="50">
                            <br />
                            <i>Last Name</i>
                            <input class="form-control" type="text" size="20" name="searchLastName" id="searchLastName" maxlength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="findTeamTitle">
                    <div>
                        <form id="teamFindFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode_team" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type_team" value="team" size="" />
                            <input type="hidden" id="fr_id_team" name="fr_id" value="[[S334:fr_id]]" />
                            <input type="hidden" id="teamPg" name="pg" value="pfind" />
                            <input type="hidden" id="teamSubmit" name="submit" value="true" />
                            <i>Team Name</i>
                            <input class="form-control" type="text" size="20" name="searchTeam" id="teamSearchTeam" maxLength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search_team" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 0 5px;
}

.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
    margin-bottom: -1px;
}

.find-tab {
    text-decoration: none !important;
}

li.find-pad-border {
    padding: 5px;
    border-right: solid 1px #eeeeee;
}

li.find-pad-border:hover {
    background-color: #eeeeee;
}

li.find-pad{
    padding: 5px;
}

li.find-pad:hover {
    background-color: #eeeeee;
}

li.find-pad:inactive {

}

I thought maybe :inactive was a real thing, turns out it's not lol. I've added a screen shot so you know what the search form looks like.

form-search

Hoping someone can give me some direction. Please let me know if there are additional information you need that I have over looked!

Thanks!

2 个答案:

答案 0 :(得分：1)

First off, the active class must be applied to the link (not the li):

<li class="find-pad-border">
    <a href="#findPartTitle" data-toggle="tab" class="active find-tab">
      <h4>Find a participant</h4>
   </a>
</li>

Then you need to set the appropriate CSS declarations

.nav-tabs h4 {
  color: #666;
}

.nav-tabs .active h4 {
  color: #66f;
}

Working demo

.nav-tabs h4 {
  color: #666;
}

.nav-tabs .active h4 {
  color: #66f;
}



.panel.with-nav-tabs .panel-heading {
  padding: 5px 5px 0 5px;
}

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.find-tab {
  text-decoration: none !important;
}

li.find-pad-border {
  padding: 5px;
  border-right: solid 1px #eeeeee;
}

li.find-pad-border:hover {
  background-color: #eeeeee;
}

li.find-pad {
  padding: 5px;
}

li.find-pad:hover {
  background-color: #eeeeee;
}

li.find-pad:inactive {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="col-12 col-sm-6 form card z-depth-3">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <li class="find-pad-border">
          <a href="#findPartTitle" data-toggle="tab" class="active find-tab">
            <h4>Find a participant</h4>
          </a>
        </li>
        <li class="find-pad">
          <a href="#findTeamTitle" data-toggle="tab" class="find-tab">
            <h4>Search for a team</h4>
          </a>
        </li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane active" id="findPartTitle">
          <div>
            <form id="findFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
              <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode" value="basic">
              <input type="hidden" name="fr_search_type" id="fr_search_type" value="participant">
              <input type="hidden" id="fr_id_participant" name="fr_id" value="[[S334:fr_id]]">
              <input type="hidden" id="pg" name="pg" value="pfind">
              <input type="hidden" id="submit" name="submit" value="true">
              <i>First Name</i>
              <input class="form-control" type="text" size="20" name="searchFirstName" id="searchFirstName" maxlength="50">
              <br />
              <i>Last Name</i>
              <input class="form-control" type="text" size="20" name="searchLastName" id="searchLastName" maxlength="50">
              <br />
              <button class="btn btn-yellow" id="fr_find_search" name="fr_find_search" value="Search" type="submit">Search</button>
            </form>
          </div>
        </div>
        <div class="tab-pane fade" id="findTeamTitle">
          <div>
            <form id="teamFindFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
              <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode_team" value="basic">
              <input type="hidden" name="fr_search_type" id="fr_search_type_team" value="team" size="" />
              <input type="hidden" id="fr_id_team" name="fr_id" value="[[S334:fr_id]]" />
              <input type="hidden" id="teamPg" name="pg" value="pfind" />
              <input type="hidden" id="teamSubmit" name="submit" value="true" />
              <i>Team Name</i>
              <input class="form-control" type="text" size="20" name="searchTeam" id="teamSearchTeam" maxLength="50">
              <br />
              <button class="btn btn-yellow" id="fr_find_search_team" name="fr_find_search" value="Search" type="submit">Search</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：1)

要达到预期效果，请使用：not（.active）css 

.nav-tabs li:not(.active) a{
   opacity:0.3
}

.nav-tabs li.active a{
   opacity:1
}

代码示例 - https://codepen.io/nagasai/pen/RyPqxb

相关问题
最新问题