如何在属性onclick中插入文本锚点？

Question

我有一个jquery选项卡，它工作正常。 Fiddle here

$(document).ready(function() {
    $('.nnntabs ul a').on('click', function(e)  {
        var current = $(this).attr('href');
        $('.tab-content > div' + current).fadeIn('slow').show().siblings().hide();
        $(this).parent('li').addClass('active').siblings().removeClass('active');
        e.preventDefault();
    });
});

我只想添加更多功能。文本锚点应该动态插入到href和id属性中以激活选项卡，或者如果有默认值则可以替换... href和id的值的来源将是菜单的文本锚点。我的小提琴样本工作正常，因为我手动插入了值。请帮助我把它变成现实......谢谢。

Answer 1

我认为你在寻找的是

$(document).ready(function() {
  var $content = $('.nnntabs > .tab-content > div');
  $('.nnntabs > ul a').each(function(i) {
    $(this).data('tab', 'tab-' + i);
    $content.eq(i).attr('id', 'tab-' + i)
  })

  $('.nnntabs ul a').on('click', function(e) {
    var current = $(this).data('tab');
    $('#' + current).fadeIn('slow').show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

.nnntabs {
  width: 100%;
}
.nnntabs ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.nnntabs ul li {
  display: inline-block;
  list-style: none;
  border: 1px solid #ddd;
  border-bottom: 0
}
.nnntabs ul li a {
  padding: 8px 10px;
  display: block;
  font-size: 1em;
  font-weight: bold;
  color: #4c4c4c;
  background: #eee;
}
.nnntabs ul li.active > a {
  background: #fff;
  color: #4c4c4c;
  margin-bottom: -1px;
  padding-bottom: 9px;
}
.tab-content {
  padding: 10px;
  border: 1px solid #ddd;
}
.tab-content > div {
  display: none;
}
.tab-content > .active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nnntabs">
  <ul>
    <li class="active"><a href="#">tab1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
  </ul>
  <div class="tab-content">
    <div class="active">
      content1
    </div>
    <div>
      content2
    </div> 
    <div>
      cotent3
    </div>
  </div>
</div>