Question

我想在 twitter bootstrap中使用数据属性显示隐藏提示框，这是因为我可以在一个页面中使用多个提醒框...

目前我有这个，

<a href="#" data-box="myAlert">Hint</a> //data-box is the id of the box

<div id="myAlert" class="alert alert-info">
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    <p>Alert Me !!!!</p>
</div>

Answer 1

尝试

$(function(){

  $('[data-box]').click(function(){
    var $this = $(this);
    $('#' + $this.data('box')).show()
    return false;
  });

  $(document).on('click', '.alert .close', function(){
    $(this).closest('.alert').hide()
  });

});

演示：Plunker

<强>更新
使用锚点选项卡显示/隐藏

<a href="#" data-box="myAlert">Hint</div>

<div id="myAlert" class="alert alert-info hide">
    <p>Alert Me !!!!</p>
</div>  

$(function(){

  $('[data-box]').click(function(){
    var $this = $(this);
    $('#' + $this.data('box')).toggle()
    return false;
  });

});

演示：Fiddle

在twitter bootstrap中显示/隐藏带有data-attribute的alertbox

1 个答案: