Question

我的HTML

<ul class="myFilters">
   <li data-type="A"><a href="#">A</a></li>
   <li data-type="B"><a href="#">B</a></li>
   <li data-type="C"><a href="#">C</a></li>
</ul>

<div class="filter">

<ul class="title">
    <li><a href="#" data-toggle="#Assurance">Assurance</a></li>
    <li><a href="#" data-toggle="#Couverture">Couverture</a></li>
    <li><a href="#" data-toggle="#Banque">Banque</a></li>
    <li><a href="#" data-toggle="#Alimentation">Alimentation</a></li>
</ul>

    <div id="Assurance" class="category">
    <ul>                                         
        <li>Groupama</li>
    </ul>
</div>

<div id="Couverture" class="category">
    <ul>                                         
        <li>Try it !</li>
    </ul>
</div>

<div id="Alimentation" class="category">
    <ul>                                         
        <li>AN example</li>
    </ul>
</div>
</div>

这是我的JS脚本

jQuery(function ($) {

$('.myFilters li').click(function(){
    $(".category").hide();
       var v = $(this).text()[0]
       $('.title li').hide().filter(function(){
          return $(this).text().toUpperCase()[0] == v;
          $(".category:first").show();
       }).show()
    })



$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $(".category").hide();
  $(selector).show();
});

 });

它工作正常，但我试图安排一些东西，但我被卡住了。

当我加载页面时，所有链接和div都出现了，我只想显示第一个字母的div。

当我点击C时，我想要从第一个链接显示第一个div。

感谢您的帮助！

Answer 1

已编辑：

载入时：

$('.myFilters li:first').trigger('click');

在点击内：

.first().find('a[data-toggle]:first').trigger('click');

jsfiddle DEMO

Answer 2

您可以先使用right selector选择元素，然后手动触发点击事件：

在加载时显示保证内容：

$('a[data-toggle="#Assurance"]').click();

点击后显示第一个内容：

$('.myFilters li').click(function(){
    $(".category").hide();
    var v = $(this).text()[0]
    $('.title li').hide().filter(function(){
        return $(this).text().toUpperCase()[0] == v;
    }).show()
    $('a[data-toggle]:visible:first').click();
})

Updated jsFiddle

Answer 3

不再使用javascript，您可以按照您希望的方式使用css选择器显示内容：

.category {display:none;}

.category:nth-of-type(1) {
     display:block;   
}

http://jsfiddle.net/5ageasm4/1/

Answer 4

这就是你想要的。查看Fiddle

我基本上只是触发li

中的第一项

$(".title > li:first").find("a[data-toggle]").trigger("click");

我正在对类别做同样的事情。

<强> 修改

我更新了Fiddle

新编辑

创建了一个新的Fiddle，这个只删除了所有重复的代码。所以基本上我创建了这两个函数

    that.selectFirstElem = function(selector){
        selector.find("a[data-toggle]").trigger("click");
    };

    that.loadFirstDataToggle = function(input){
        return $('.title li').hide().filter(function(){
              return $(this).text().toUpperCase()[0] == input;
          }).show();
    };

这两个功能你可以在你需要的地方打电话。

用jQuery显示div

4 个答案: