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 に答える