1

您将如何使用 css 复制 google chrome 中标签的行为？

我遇到的一个问题是关闭按钮 (x)

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

有任何想法吗？

4

2 回答 2

1

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

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

让我们从嵌套元素开始。我选择将我的选项卡放在 a 中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 来演示这两点：

原来的jsFiddle

编辑： 修改 jsFiddle

本质上，代码的工作方式如下：

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

当您单击a标记时，这是我制作的 x 按钮（类似于 chrome 选项卡），它通过将填充、边距和宽度更改为 0 来动画列表项（选项卡列表，浮动到左侧） .

从技术上讲，由于我将 li 设置为边界框以调整框大小，因此我根本不需要在动画函数中使用 padding:0。

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

一些额外的收获：

  • 您可以在 jQuery 中的几乎任何项目上设置点击事件，但是如果某些移动设备不是a标签，它们就会变得很挑剔。
  • 您是正确的，您不应该在锚标记内放置一个按钮，但是将两个锚标记或一个按钮和一个锚标记放在一个列表项中是可以的。

设置活动选项卡和使用 % 作为最大宽度等其他一切都应该非常明显，但如果您需要更多帮助或澄清，请告诉我！

于 2013-01-23T22:34:43.630 回答
1

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

这是Js 小提琴

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；显示：表格单元格；垂直对齐：中间；过渡：不透明度 0.5s；-moz 过渡：不透明度 0.5 秒；/* Firefox 4 / -webkit-transition: opacity .5s; / Safari 和 Chrome / -o-transition: opacity .5s; /歌剧 */ }

#背景：目标{不透明度：0；}

.text{ 显示：内联块；}

.close-button{ 文本对齐：中心；宽度：20px；高度：20px；显示：内联块；-webkit-border-radius：50%；-moz-边界半径：50%；边界半径：50%；}

.close-button:hover{ 背景颜色:#ec8e92; }

.close-button:active{ 背景颜色:#cc7d80; }

.close-button a{ 文字装饰：无；颜色：#868687; }

.close-button a:hover{ 颜色:#FFFFFF; }

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

干杯。

于 2013-01-23T23:18:21.717 回答