如何创建自定义 jquery 选项卡？

发布于 2024-10-26 03:22:11 字数 465 浏览 2 评论 0原文

我有一个特定的场景：

我有 4 个选项卡，每个选项卡都有自己的 2 个图标，用于指示何时选择或不选择。

我想要做的是，当我单击选项卡时图标会发生变化，当我单击另一个选项卡时会更改为另一个图标。

PS 我说的是选项卡本身，而不是容器的内容。

谢谢

检查这张图片： http://answers .oreilly.com/index.php?app=core&module=attach&section=attach&attach_rel_module=post&attach_id=621

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心旳酸楚 2024-11-02 03:22:11

假设每个选项卡都有自己的 css 类，您可以在 CSS 中为选项卡中的每个图片使用 background-image 。

然后，当选择选项卡时（您可以添加一个类，表示它已被选择，例如“已选择”或其他内容），然后给出不同的图像

例如：

.book_tab{
background-image:url('img_plane.png');
background-repeat:no-repeat;`
}
.rent_tab{
background-image:url('img_car.png');
background-repeat:no-repeat;`
}
.deals_tab{
background-image:url('img_tag.png');
background-repeat:no-repeat;`
}
.book_tab .selected{
background-image:url('img_plane2.png');
background-repeat:no-repeat;`
}
.rent_tab .selected{
background-image:url('img_car2.png');
background-repeat:no-repeat;`
}
.deals_tab .selected{
background-image:url('img_tag2.png');
background-repeat:no-repeat;`
}

Assuming each tab has their own css class, you could use background-image in CSS for each of the pictures in the tabs.

Then, when the tab is selected (which you could then add a class saying it's selected like "selected" or something) and then give a different image

For example:

.book_tab{
background-image:url('img_plane.png');
background-repeat:no-repeat;`
}
.rent_tab{
background-image:url('img_car.png');
background-repeat:no-repeat;`
}
.deals_tab{
background-image:url('img_tag.png');
background-repeat:no-repeat;`
}
.book_tab .selected{
background-image:url('img_plane2.png');
background-repeat:no-repeat;`
}
.rent_tab .selected{
background-image:url('img_car2.png');
background-repeat:no-repeat;`
}
.deals_tab .selected{
background-image:url('img_tag2.png');
background-repeat:no-repeat;`
}

回复收藏 0 原文