Question

在我的网站上完成标签后，我发现当我从第一个标签导航到下一个标签时，它运行良好，但如果我尝试从第一个标签导航到最后一个标签或第三个标签，它将崩溃而不能正常工作< / p>

这是完整的代码jquery，Css和html代码

＆＃13;

    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();
        });
    });

＆＃13;

/*********************************************************************************/
/* 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;
        }

＆＃13;

<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>

＆＃13;

请帮助

Answer 1

您面临的问题是因为您尚未关闭包含

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>

使用更正后的代码链接到jsfiddle -

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

Answer 2

JQuery UI tabs是你的朋友。

在JQuery之后在html中包含JQuery UI脚本：

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

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

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

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

导航时jquery选项卡的问题

2 个答案:

MRl LIFT