导航时 jquery 选项卡出现问题

Question

在我的网站上完成选项卡后，我发现当我从第一个选项卡导航到下一个选项卡时它运行良好，但如果我尝试从第一个选项卡导航到最后一个或第三个选项卡，它会崩溃而不是工作

这是完整代码 jquery、Css 和 html 代码

    jQuery(document).ready(function() {
        jQuery('.tabs .tab-links a').on('click', function(e)  {
            var currentAttrValue = jQuery(this).attr('href');
     
            // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
    jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
     
            e.preventDefault();
        });
    });

/*********************************************************************************/
/* Tabs                                                                          */
/*********************************************************************************/

.tabs {
    width:100%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#65A69E;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#81B6AF;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#56928B;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">DOMUS  LIFT</a></li>
        <li><a href="#tab2">MRL LIFT</a></li>
        <li><a href="#tab3">OIL LIFT</a></li>
        <li><a href="#tab4">ESCALATORS</a></li>
        </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
            <h3>Efficiency and flexibility</h3>
            <p> problems on private , public and commercial buildings .</p>
            <p>onsumptions and low investment costs , all of which making DOMUS LIFT the best solution for any project.</p>
           
        </div>
 
        <div id="tab2" class="tab">
            <h3>MRl LIFT</h3>
            <p>MRl LIFT able both on new building and on the existing ones in need of recovery and increase of value</p>
                        
        <div id="tab3" class="tab">
            <h3>OLEO-LIFT</h3>
            <p>The OLEO-LIFT performance are suitable for </p>
            
              </div>
         
          <div id="tab4" class="tab">
            <h3>ESCALATORS</h3>
            <p>s production , both for the lift companies and for the robotized mobility .asiness on their after sale service
</p>

           
        </div>
        
    </div>
</div>

请帮忙

Answer 1

JQuery UI tabs 是你的朋友。

在您的 html 中包含 JQuery UI 脚本，在 JQuery:

之后

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

然后将您的 JavaScript 更改为以下内容：

jQuery(document).ready(function() {
    $( "div.tabs" ).tabs();
});

您可以使用许多选项。有关详细信息，请参阅文档。有关样式建议，请查看 examples.

Answer 2

您遇到的问题是因为您没有关闭包含

MRl LIFT

的 div

正确的代码 -

    <div id="tab2" class="tab">
        <h3>MRl LIFT</h3>
        <p>MRl LIFT able both on new building and on the existing ones in need of recovery and increase of value</p>
    </div>

Link 到带有更正代码的 jsfiddle -

http://jsfiddle.net/Ashish_developer/7acahwnp/4/

导航时 jquery 选项卡出现问题

proplem with jquery tabs while navigating

html

javascript

css

jquery

tabs

MRl LIFT