Question

您好，我想默认选择列表中的第一项。因此，当我打开视图时，希望通过Général下的 Plafondsécuritésociale 默认。

$("#général").val($("#général a:first").selectedIndex());

  
<div class="col-12">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
          <div class="col-sm">
            <div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
              <span class="user" style="font-weight:bold">Général</span>
            </div>
          </div>
          <div class="col-sm">
            <div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
              <i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
                         expand_more
                         </i>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div id="général" class="collapse">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   Plafond sécurité sociale
                   </a>
          <a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   Smic
                   </a>
          <a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   CSG CRDS
                   </a>
          <a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                   Abattement gérant majoritaire
                   </a>
        </div>
      </div>
    </div>
  </div>
</div>

如何添加修改我的功能以取得良好的效果。

Answer 1

不确定自己要的是什么，但是请选择所需的项目并添加选择的样式。

$('.mdc-list-item')[0]
$('.mdc-list-item:first-child()')[0]
$('.mdc-list-item:first')[0]

Answer 2

不确定这是否是您要寻找的东西。

$(document).ready(function() {
  $("#item1").addClass("selected");

  $(".list-item").click(function() {
    $(".list-item").removeClass("selected");
    $(this).addClass("selected");
  });
});

a {
  max-width: 100px;
  display: block;
  margin: 5px;
  padding: 5px 10px;
  text-align: center;
}
a,
a:hover {
  color: inherit;
  text-decoration: none;
}
a:hover {
  background-color: #eee;
}
a.selected {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="item1" href="#" class="list-item">Item 1</a>
<a id="item2" href="#" class="list-item">Item 2</a>
<a id="item3" href="#" class="list-item">Item 3</a>

默认情况下，如何选择列表中的第一项

2 个答案: