不需要更改活动选项卡的 css 选项卡

发布于 2024-09-07 19:45:47 字数 730 浏览 3 评论 0原文

我正在寻找有关如何不更改用于创建 css 选项卡的所有代码的想法(以便我可以将其放入包含文件中以避免在使用它的所有文件中重复代码),但我当前的实现并没有不允许这样做,因为我需要使用 id="selectedTab" 选择活动选项卡。

到目前为止,我发现解决这个问题的唯一实现是以下一个: http://unraveled.com/publications/css_tabs/

它需要为每个选项卡分配一个类,并且使用主体 ID 来确定活动选项卡。

这是唯一的方法还是有其他选择?

我当前的代码如下所示( id=noajax" 用于避免使用 ajax 加载某些页面):

<div class="productTabsBlock2">
  <a id="selectedTab" href="/link1" >OVERVIEW</a>
  <a href="/link2">SCREENSHOTS</a>
  <a id="noajax" href="/link3" >SPEED TESTS</a>
  <a href="/link4" >AWARDS</a>
</div>

编辑:asp 可用作服务器端,并且已在这些页面上使用。

I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".

The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/

It requires assigning a class to each tab and uses the body id to determine the active tab.

Is this the only way or is there any other alternatives?

My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):

<div class="productTabsBlock2">
  <a id="selectedTab" href="/link1" >OVERVIEW</a>
  <a href="/link2">SCREENSHOTS</a>
  <a id="noajax" href="/link3" >SPEED TESTS</a>
  <a href="/link4" >AWARDS</a>
</div>

EDIT: asp is available as server side and is already used on these pages.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

鹿童谣 2024-09-14 19:45:47

如果您正在寻找非 JS 解决方案,那么主体类/id 提供了最简单的方法来完成您想要的操作。

如果您有权访问 JS 库,则可以轻松地将“选定”类添加到任何 元素并修改其外观。

万一您没有注意到,您可以在一个元素中使用多个类定义。例如, 有效,并且 CSS 选择器 .noajax.selected 都将应用到元素。

If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.

If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.

Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.

絕版丫頭 2024-09-14 19:45:47

包含文件有什么用?如果是像 PHP 这样的服务器端编程语言,您可以通过各种方法为所选选项卡传递参数。

An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.

潜移默化 2024-09-14 19:45:47

你可以使用 jQuery 添加“selectedTab”id(或类),如下所示

$('.productTabsBlock2 a').mouseover(function () {
  $(this).addClass('selectedTab');
});

you could use jQuery to add the `selectedTab' id (or class) like so

$('.productTabsBlock2 a').mouseover(function () {
  $(this).addClass('selectedTab');
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文