Question

您如何使用css复制Google Chrome中标签的行为？

我遇到的一个问题是关闭按钮（x）

粗略的谷歌搜索说你不应该在一个锚内有一个按钮，但如果是这样的话我不知道如何复制这个行为。

有什么想法吗？

Answer 1

我将假设您需要两个单独的答案来解答您的问题：

如何正确嵌套元素？
您如何执行关闭操作？

让我们从嵌套元素开始。我选择在ul中制作标签，并在该列表中将每个标签设为li。关闭按钮是一个a标记，位于内部 li。

<ul> <li>Tab 1 <a>x</a></li> <li>Tab 2 <a>x</a></li> <li>Tab 3 <a>x</a></li> <li>Tab 4 <a>x</a></li> <li>Tab 5 <a>x</a></li> </ul>

（我强烈建议你为他们要做的事情提供所有适当的课程，但在这种情况下，我使用最少量的代码来保持其清洁和易于阅读。）

接下来，我们将使用JavaScript进入执行关闭操作。

我能够为您创建以下jsFiddle，以展示这两点：

original jsFiddle

编辑： revised jsFiddle

基本上，代码的工作原理如下：

$('a').click(function() { $(this).closest('li').animate({padding:0, margin:0, width: 0}, function () { $(this).closest('li').hide(); }); });

当您点击a标签时，这就是我制作了x按钮（类似于Chrome标签页），它会通过更改列表项目（标签列表，浮动到左侧）来设置动画填充，边距和宽度为0.

从技术上讲，由于我将li设置为border-box来进行大小调整，因此我根本不需要在animate函数中使用padding：0。

动画完成后，我会完全隐藏列表项。（如果我想摆脱它，我甚至可以完全删除它，但我想让你看看我在做什么。）

一些额外的要点：

您可以在jQuery中的几乎任何项目上都有一个点击事件，但如果某些移动设备不是a标记，那么它们会变得挑剔。

你是不对的，你不应该在一个锚标签内放一个按钮，但是把两个锚标签或一个按钮和一个锚标签放到一个列表项中就可以了。

其他所有内容如设置活动标签并使用％作为最大宽度应该非常明显，但如果您需要更多帮助或澄清，请告诉我们！

Answer 2

这是一个没有javascript代码的解决方案，只使用css。不知道是否是最好的解决方案，但知道存在这种东西肯定很有趣。

以下是Js Fiddle

HTML :(您应该使用<li>我认为最适合组织）

<div class="background" id="background">
    <i class="icon-home"></i>
    <div class="text">Tab name 
        <div class="close-button">
            <a href="#background" >x</a>
        </div>
    </div>
</div>

然后是CSS魔术：

@import   URL（ 'http://twitter.github.com/bootstrap/assets/css/bootstrap.css'）;

#background {       背景色：＃d8d8d7;       高度：30PX;不透明度：1;       显示：表细胞;       垂直对齐：中部;        过渡：不透明度.5s;       -moz-transition：不透明度.5s; / * Firefox 4 /       -webkit-transition：opacity .5s; / Safari和Chrome /       -o-transition：不透明度.5s; / Opera * /       }

#background：target {opacity：0; }

.text {display：inline-block; }

.close按钮{       文本对齐：中心;       宽度：20像素;       高度：20像素;显示：内联块;       -webkit-border-radius：50％; -moz-border-radius：50％; border-radius：50％; }

.close-button：悬停{background-color：＃ec8e92; }

.close-button：active {background-color：＃cc7d80; }

.close-button a {text-decoration：none;       颜色：＃868687; }

.close-button a：hover {color：#FFFFFF; }

希望它有所帮助，或者至少打开你的CSS视野。

干杯。

谷歌浏览器像css中的关闭按钮行为

2 个答案: