在 jQuery 中显示索引

Question

$(document).ready(function() {
  $('ul li').hover(function(event){
    $(this).css({
      'background':'pink',
      'height':'75px'
    }, function(event){
      $(this).css({
        'background':'white',
        'height':'40px'
      });
    });


    $('ul li').on('click',function(event){
      $(this).css({
        'background':'lightseagreen',
        'color':'white'
      });
      var index = $('.content').index( this );
      $('.content').show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-menu" id="tabMenu1">
  <li class="menuitem1">google</li>
  <li class="menuitem2">facebook</li>
  <li class="menuitem3">path</li>
</ul>
<div class="tab-contents">
  <div class="content">
    <h1>Google</h1>
    <p>pppppp</p>
  </div>
  <div class="content">
    <h1>Facebook</h1>
    <p>qqqqqq</p>
  </div>
  <div class="content">
    <h1>path</h1>
    <p>wwwwww</p>
  </div>
</div>

请有人帮助我

最近在学校学编程，学得很有意思但是昨天我接到了一个艰巨的任务。问题是制作表格，如果单击 "li class(.menuitem1~3)"，则按顺序显示 "div class( .content)"/仅使用 jquery 脚本我真的很想知道使用功能（悬停和索引）我无法解决这个测验，所以请有人帮助我谢谢

Answer 1

给你一个解决方案

$('ul li').hover(function(event){
  $(this).css({
    'background':'pink',
    'height':'75px'
  });
}, function(event){
  $(this).css({
    'background':'white',
    'height':'40px'
  });
});

$('ul li').on('click',function(event){
  /*$(this).css({
    'background':'lightseagreen',
    'color':'white'
  });*/
  $('.content:eq('+ $(this).index() +')')
    .slideDown()
    .siblings('div.content')
    .slideUp();
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-menu" id="tabMenu1">
  <li class="menuitem1">google</li>
  <li class="menuitem2">facebook</li>
  <li class="menuitem3">path</li>
</ul>
<div class="tab-contents">
  <div class="content">
    <h1>Google</h1>
    <p>pppppp</p>
  </div>
  <div class="content">
    <h1>Facebook</h1>
    <p>qqqqqq</p>
  </div>
  <div class="content">
    <h1>path</h1>
    <p>wwwwww</p>
  </div>
</div>

请检查 HTML 结构。

希望对您有所帮助。

在 jQuery 中显示索引

showing index in jQuery

indexing

jquery

show

hover