Question

我对Bootstrap很新。我编写了以下代码，只需单击鼠标即可正常工作。我想让相同的事件与鼠标悬停一起工作，这由于某种原因不起作用。任何帮助将不胜感激。以下是我的相同代码。

<html>
   <head>
    <title></title>
    <style type="text/css">
    </style>
    <link rel="stylesheet"       href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

    </head>


    <body>
    <ul class="nav nav-pills nav-stacked col-md-2" id="pills-first">
        <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
        <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
        <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
        <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
    </ul>
    <div class="tab-content col-md-10">
        <div class="tab-pane active" id="tab_a">
            <h4>Pane A</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et     malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_b">
            <h4>Pane B</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_c">
            <h4>Pane C</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_d">
            <h4>Pane D</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
    </div><!-- tab content -->




    </body>
    </html>

Answer 1

您可以在包含bootstrap javascript：

之后添加此脚本

＆＃13;

$(document).ready(function() {
    $('.nav-pills li').hover(function() {
        $('.tab-content').find('.active').removeClass('active');
        $('.nav-pills').find('.active').removeClass('active');
        $(this).addClass('active');
        $($(this).find('a').attr('href')).addClass('active');
    });
});

＆＃13;

<html>
   <head>
    <title></title>
    <style type="text/css">
    </style>
    <link rel="stylesheet"       href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

    </head>


    <body>
    <ul class="nav nav-pills nav-stacked col-md-2" id="pills-first">
        <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
        <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
        <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
        <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
    </ul>
    <div class="tab-content col-md-10">
        <div class="tab-pane active" id="tab_a">
            <h4>Pane A</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et     malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_b">
            <h4>Pane B</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_c">
            <h4>Pane C</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
        <div class="tab-pane" id="tab_d">
            <h4>Pane D</h4>
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.
            </p>
        </div>
    </div><!-- tab content -->




    </body>
    </html>

＆＃13;

如何使用鼠标悬停而不是单击使下面的代码工作？

1 个答案: