0

是否可以将 jQuery 菜单链接到选项卡？

例如，如果用户在下面的菜单中选择“按过滤器”，我希望它打开“按过滤器搜索”选项卡。我怎样才能做到这一点？

JS

$("#menu").menu();
$("#search").tabs();

HTML

<ul id="menu" style="border: 0px; background:none">
<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>

<div id="search" style="z-index: 1;">
  <ul>
    <li><a href="#search-1">Search By Filters</a></li>
    <li><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>
4

1 回答 1

1

是的，您可以这样做：
为每个搜索选项添加 ID

在菜单中创建一个 ID 2 的侦听器，然后单击，调用

$('#tabid').click();

这是完整的代码：

剧本：

$('#2a').click(function(){
    $('#sbf a').click(); 
}); 


$('#2b').click(function(){
    $('#sbr a').click(); 
});

HTML 代码：

<ul id="menu" style="border: 0px; background:none; width:50%; ">

<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>
<div id="search" style="z-index: 1;">
  <ul>
    <li id="sbf"><a href="#search-1">Search By Filters</a></li>
    <li id="sbr"><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>

检查这个小提琴

http://jsfiddle.net/ej67Q/

于 2013-02-10T23:14:03.543 回答