传递变量来触发隐藏/显示面板

发布于 2024-09-29 14:26:45 字数 889 浏览 2 评论 0原文

我有一个从列表项锚点触发的面板隐藏/显示设置。效果很好。问题是，我的网站导航中还有一个下拉菜单，它也需要从网站上的任何页面触发每个面板。就像说，我在产品页面上有面板（按此顺序）、“硬件”、“软件”、“配件”。因此，当我在“关于”页面上单击“软件”时，预期结果是将我带到“产品”页面并打开“软件”面板。这是我的面板 jquery 脚本：

$("ul#product-type li a").click(function() {
$("ul#product-type li").removeClass("selected");
$(this).parent().addClass("selected");
var currentTab = $(this).attr("href");
    $("div.panel").hide();
    $(currentTab).show();
return false; });

Dropdown Nav Markup：

<ul id="nav">
<li><a href="/products/#hardware"><span>Hardware</span></a></li>
<li><a href="/products/#software"><span>Software</span></a></li>
<li><a href="/products/#accessories"><span>accessories</span></a></li>

我尝试将导航选择器添加到单击功能，但这不起作用。任何想法或建议将不胜感激。

干杯，瑞安

原文

I have a panel hide/show setup that is triggered from a list item anchor. Works great. The problem is, I also have a dropdown menu in the site navigation that also needs to trigger each panel, from any page on the site. Like say, I have panels (in this order), "Hardware", "Software", "Accessories" on the Products page. So when I'm on the About page, and I click "Software", the expected result is to take me to the Products page and have the "Software" panel open. Here's my jquery script for the panel:

$("ul#product-type li a").click(function() {
$("ul#product-type li").removeClass("selected");
$(this).parent().addClass("selected");
var currentTab = $(this).attr("href");
    $("div.panel").hide();
    $(currentTab).show();
return false; });

Dropdown Nav Markup:

<ul id="nav">
<li><a href="/products/#hardware"><span>Hardware</span></a></li>
<li><a href="/products/#software"><span>Software</span></a></li>
<li><a href="/products/#accessories"><span>accessories</span></a></li>

I've tried adding the nav selector to the click function, but that doesn't work. Any ideas or suggestions would be hugely appreciated.

Cheers,
Ryan

分享到QQ

分享到微博

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

发布评论

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

葵雨 2024-10-06 14:26:45

href 不是有效的选择器，因为 $("/products/#hardware") 不起作用。不过，使用 .hash 属性是完美的，因为您将得到 $("#hardware")。像这样使用它：

$("ul#product-type li a").click(function() {
  $("ul#product-type li").removeClass("selected");
  $(this).parent().addClass("selected");
  $("div.panel").hide();
  $(this.hash).show();
  return false; 
});

The href isn't a valid selector, since $("/products/#hardware") wouldn't work. However using the .hash property is perfect, as you'll get $("#hardware"). Use it like this:

$("ul#product-type li a").click(function() {
  $("ul#product-type li").removeClass("selected");
  $(this).parent().addClass("selected");
  $("div.panel").hide();
  $(this.hash).show();
  return false; 
});

回复收藏 0 原文

~没有更多了~