问如何在jquery选项卡中传递动态id

EN

  $(".tabs li").each(function(i,x) {
    $(this).attr("data-tab","tab-" + i);
  })

  $(".tab-row div").each(function(i,x) {
    $(this).attr("id","tab-" + i);
  })

$('ul.tabs li').click(function(){
  var tab_id = $(this).attr('data-tab');
  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');
  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
})

$(document).ready(function() {
  $(".tabs li").each(function(i,x) {
    $(this).attr("data-tab","tab-" + i);
  })
  
  $(".tab-row div").each(function(i,x) {
    $(this).attr("id","tab-" + i);
  })
})

.tab-content{
	display: none;	
}
.tab-content.current{
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
    <li class="tab-link current" >Tab One</li>
    <li class="tab-link" >Tab Two</li>
    <li class="tab-link" >Tab Three</li>
</ul>
<div class="tab-row">
    <div class="tab-content">
        <h1>1</h1>
    </div>
    <div class="tab-content">
        <h1>2</h1>
    </div>
    <div class="tab-content">
        <h1>3</h1>
    </div>
</div>

$(document).ready(function() {
  $(".tabs li").each(function(i, v) {
    $(this).attr('data-tab', "tab-" + i)
    $('.tab-content').eq(i).attr('id', "tab-" + i)
  })



  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })
})

.tab-content {
  display: none;
}

.tab-content.current {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab-link current">Tab One</li>
  <li class="tab-link">Tab Two</li>
  <li class="tab-link">Tab Three</li>
</ul>
<div class="tab-row">
  <div class="tab-content">
    <h1>1</h1>
  </div>
  <div class="tab-content">
    <h1>2</h1>
  </div>
  <div class="tab-content">
    <h1>3</h1>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
    <li class="tab-link current" data-tab="tab-7">Tab One</li>
    <li class="tab-link" data-tab="tab-8">Tab Two</li>
    <li class="tab-link" data-tab="tab-9">Tab Three</li>
</ul>
<div class="tab-row">
    <div id="tab-7" class="tab-content">
        <h1>1</h1>
    </div>
    <div id="tab-8" class="tab-content">
        <h1>2</h1>
    </div>
    <div id="tab-9" class="tab-content">
        <h1>3</h1>
    </div>
</div>

.tab-content{
    display: none;  
}
.tab-content.current{
  display: inherit;
}

$(function()
{
  $('ul.tabs li').click(function()
  {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  });

  //Creat dynamic data-tabs and id's
  //tabs
  $('.tabs > li').each(function(index)
  {
        $(this).attr('data-tab','tab-'+index+1);
  });
  //tabrows
  $('.tab-row > div').each(function(index){
    $(this).attr('id', 'tab-'+index+1);
  });


});