Question

我想在悬停时激活我的标签。实现这一目标的最佳方法是什么？理想情况下，无需更改tabs.js文件。

这是我的网址http://opennetsummit.wpengine.com/

选项卡是页面中间的三个图像选项。

<div class="panel">
    <div class="panel-heading">
        <!-- Tabs -->
        <div class="container">
            <ul class="nav panel-tabs">
                <li class="active col-sm-3">
                    <a href="#tab1" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
                            <h3>Workshops</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a href="#tab2" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
                            <h3>Open Networking Summit</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <a href="#tab3" data-toggle="tab">
                        <div>
                            <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
                            <h3>Webinars</h3>
                        </div>
                    </a>
                </li>
                <li class="col-sm-3">
                    <div class="mid-form">
                        <h3>Get Updates</h3>
                        <form method="post" action="http://opennetsummit.wpengine.com/" id="mc4wp-form-1" class="form mc4wp-form form-inline" _lpchecked="1">
                            <div class="row mid-form">

                                <div class="col-sm-12">
                                    <input type="text" name="FNAME" placeholder="First Name" required="required" class="form-control" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                                </div>

                                <div class="col-sm-12">
                                    <input type="text" name="LNAME" placeholder="Last Name" required="required" class="form-control">
                                </div>

                                <div class="col-sm-12">
                                    <input type="email" name="EMAIL" placeholder="Email Address" required="required" class="form-control">
                                </div>

                                <div class="col-sm-6 col-sm-offset-6">
                                    <input type="submit" value="Sign Up" class="form-control">
                                </div>

                            </div>

                            <textarea name="_mc4wp_required_but_not_really" style="display: none !important;" class="form-control"></textarea>
                            <input type="hidden" name="_mc4wp_form_submit" value="1" class="form-control">
                            <input type="hidden" name="_mc4wp_form_instance" value="1" class="form-control">
                            <input type="hidden" name="_mc4wp_form_nonce" value="d8732ddff8" class="form-control">
                        </form>
                    </div>

                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body hompage-panel">
        <div class="tab-content">
            <div class="tab-pane col-sm-8 col-sm-offset-2 active" id="tab1">
                <div class="col-sm-4 center">
                    <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-middle.png">
                </div>

                <div class="col-sm-8">
                    <h2>Defy Protocol </h2>
                    <h1>EMBRACE {OPEN} SOFTWARE</h1>
                    <h3>Open Networking Summit</h3>
                    <hr>
                    <p>June 15 - 18, 2015</p>
                    <p>Santa Clara Convention Center</p>
                    <a href="#" class="btn btn-more">More Information</a>       
                </div>
            </div>
            <div class="tab-pane col-sm-8 col-sm-offset-2" id="tab2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
            <div class="tab-pane col-sm-8 col-sm-offset-2" id="tab3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

Answer 1

您不需要更改tabs.js

你只需要像评论中提到的那样调用这个动作。这里有一些基本显示示例。 http://getbootstrap.com/javascript/

您只需将其附加到悬停 - http://api.jquery.com/hover/

即可

Bootstrap 3选项卡 - 在悬停时显示？

1 个答案: