[jQuery]設定頁籤熱鍵

[jQuery]設定頁籤熱鍵

由於網頁上有多個頁籤,使用者希望可以透過鍵盤切換頁籤,

如Shift+1切到頁籤一、Shift+2切到頁籤二....等,

而這需求也不難,因為已有HotKeys可達到,自己記錄一下。

 

Html

<!-- the tabs -->
<ul class="tabs">
    <li ><a href="#1">RiCo技術農場</a></li>
    <li ><a href="#2">MSDN技術論壇</a></li>
    <li ><a href="#3">TechNet技術論壇</a></li>
</ul>
 
<!-- tab "panes" -->
<div class="panes">
    <div id="d1">歡迎參觀我的部落格,請多多指教</div>
    <div id="d2">MSDN逛過才知道它的好</div>
    <div id="d3">TechNet看過才了解它的美</div>
</div>

 

 

 

jQuery

<script type="text/javascript">

 
            $(function() {

 
                //setup ul.tabs to work as tabs for each div directly under div.panes
                $("ul.tabs").tabs("div.panes > div");
                //切換頁籤其實就是click頁籤超連結
                $(document).bind('keydown', 'Shift+1', function (){$('a[href=#1]').click();});            
            $(document).bind('keydown', 'Shift+2', function (){$('a[href=#2]').click();});
            $(document).bind('keydown', 'Shift+3', function (){$('a[href=#3]').click();});
            });

 
        </script>

 

 

 

結果:

image

初始畫面。

 

image

Shift+2切換頁籤。

 

image

 

 

Shift+3切換頁籤。