【问题标题】:Using Hotkeys to navigate tabs使用热键导航选项卡
【发布时间】:2015-08-18 18:13:30
【问题描述】:

如何使用使用以下热键实现的快捷键在不同选项卡之间导航:https://github.com/jeresig/jquery.hotkeys

<div class="box-content">
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a href="#info">Info</a></li>
                    <li><a href="#custom">Custom</a></li>
                    <li><a href="#messages">Messages</a></li>
                </ul>

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active" id="info">
                        <h3>Charisma
                            <small>a full featured template</small>
                        </h3>
                        <p>Its a full featured, responsive template for your admin panel. It is optimized for tablets
                            and mobile phones.</p>

                        <p>Check how it looks on different devices:</p>
                        <a href="http://www.responsinator.com/?url=usman.it%2Fthemes%2Fcharisma"
                           target="_blank"><strong>Preview on iPhone size.</strong></a>
                        <br>
                        <a href="http://www.responsinator.com/?url=usman.it%2Fthemes%2Fcharisma"
                           target="_blank"><strong>Preview on iPad size.</strong></a>
                    </div>
                    <div class="tab-pane" id="custom">
                        <h3>Custom
                            <small>small text</small>
                        </h3>
                        <p>Sample paragraph.</p>

                        <p>Your custom text.</p>
                    </div>
                    <div class="tab-pane" id="messages">
                        <h3>Messages
                            <small>small text</small>
                        </h3>
                        <p>Sample paragraph.</p>

                        <p>Your custom text.</p>
                    </div>
                </div>
            </div>

我的热键脚本实现如下:

 <script src="<?php echo base_url(); ?>assets/hotkeys/jquery-1.4.2.js"></script>
            <script src="<?php echo base_url(); ?>assets/hotkeys/jquery.hotkeys.js"></script>
            <script>
                var y = jQuery.noConflict();

                y(document).ready(function () {
                    y(document).bind('keydown', 'shift+w', function () {
                        y('#messages')[0].tabs();

                    })
                });

            </script>

如何实现这一点,以便当我按下 shift 和 w (shift+w) 时,它会打开消息选项卡?使用标签失败。

【问题讨论】:

  • 试试这个,y('#messages').tabs('show');
  • @kamalpal 不工作

标签: jquery twitter-bootstrap-3 hotkeys jquery-hotkeys


【解决方案1】:
function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

y(document).ready(function () {
  y(document).bind('keydown', 'shift+w', function () {
    activaTab('messages');
  })
});

你能试试这个吗,我还没试过,但代码看起来不错!

【讨论】:

    猜你喜欢
    • 2012-01-22
    • 2011-02-28
    • 1970-01-01
    • 2021-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-14
    • 1970-01-01
    相关资源
    最近更新 更多