Les onglets Bootstrap ne semblent pas changer entre les différents onglets

Question

J'ai fait un simple onglet mais maintenant j'ai rencontré ce problème que cet onglet ne semble pas changer de nom d'onglet. Voici le lien où vous pouvez voir et personnaliser mon onglet: http://jsfiddle.net/6gahxfjn/

<div class="tabs"> 
         <ul class="nav nav-tabs" role="tablist"> 
          <li role="presentation"><a href="#namayandegi" aria-controls="namayandegi" role="tab" data-toggle="tab">نمایندگی هاست لینوکس</a></li> 
          <li role="presentation"><a href="#files" aria-controls="files" role="tab" data-toggle="tab">میزبانی فایل نامحدود</a></li> 
          <li role="presentation"><a href="#serverspecial" aria-controls="serverspecial" role="tab" data-toggle="tab">سرور اختصاصی ویژه</a></li> 
          <li role="presentation"><a href="#servergreen" aria-controls="servergreen" role="tab" data-toggle="tab">سرور اختصاصی سبز</a></li> 
          <li role="presentation"><a href="#server" aria-controls="server" role="tab" data-toggle="tab">سرورمجازی</a></li> 
          <li role="presentation"><a href="#linuxspecial" aria-controls="linuxspecial" role="tab" data-toggle="tab">هاست لینوکس ویژه</a></li> 
          <li role="presentation" class="active"><a href="#linux" aria-controls="linux" role="tab" data-toggle="tab">هاست لینوکس</a></li> 
         </ul> 
         <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane active" id="home"> 
           <h3 style="padding-top:100px;">هاست لینوکس</h3> 
           <div class="row"> 
            <div class="col-lg-3"> 
             <img class="img-left" src="assets/img/linux-host.png"></img> 
            </div> 
            <div class="col-lg-9"> 
             <p class="paragra"> 
             سرویس هاست لینوکس معمولی جهت ارائه خدمات به وب سایت هایی با بازدید و مصرف معمولی از منابع سرور است که کدنویسی و برنامه نویسی آن بر پایه سیستم عامل لینوکس و با زبان های برنامه نویسی php یا CGI یا پرل و ... می باشد. البته هاست لینوکس بدین معناست که فقط سیستم عامل نصب شده، روی سرور لینوکس است و هیچ ارتباطی با سیستم عامل کامپیوتر شخصی شما ندارد و چنانچه روی کامپیوتر شما ویندوز نصب باشد به راحتی می توانید از هاست لینوکس استفاده کنید. سرورهای این نوع سرویس، همگی در بستر شبکه ای دیتاسنتر هاست ایران در داخل ایران میزبانی می شوند و از کنترل پنل cpanel در ایران استفاده می کند و وب سرور آن آپاچی می باشد. 
             </p> 
            </div> 
           </div> 
           <a href="#"></a> 
          </div> 
          <div role="tabpanel" class="tab-pane" id="namayandegi">...</div> 
          <div role="tabpanel" class="tab-pane" id="files">...</div> 
          <div role="tabpanel" class="tab-pane" id="serverspecial">...</div> 
         </div> 
        </div> 

Alors, comment puis-je résoudre ce problème p

Answer 1

Ici, vous allez avec une solution http://jsfiddle.net/6gahxfjn/1/

$('.nav a').click(function (e) { 
 
    e.preventDefault() 
 
    $(this).tab('show') 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="tabs"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation"><a href="#namayandegi" aria-controls="namayandegi" role="tab" data-toggle="tab">نمایندگی هاست لینوکس</a></li> 
 
    <li role="presentation"><a href="#files" aria-controls="files" role="tab" data-toggle="tab">میزبانی فایل نامحدود</a></li> 
 
    <li role="presentation"><a href="#serverspecial" aria-controls="serverspecial" role="tab" data-toggle="tab">سرور اختصاصی ویژه</a></li> 
 
    <li role="presentation"><a href="#servergreen" aria-controls="servergreen" role="tab" data-toggle="tab">سرور اختصاصی سبز</a></li> 
 
    <li role="presentation"><a href="#server" aria-controls="server" role="tab" data-toggle="tab">سرورمجازی</a></li> 
 
    <li role="presentation"><a href="#linuxspecial" aria-controls="linuxspecial" role="tab" data-toggle="tab">هاست لینوکس ویژه</a></li> 
 
    <li role="presentation" class="active"><a href="#linux" aria-controls="linux" role="tab" data-toggle="tab">هاست لینوکس</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="linuxspecial"> 
 
     <h3 style="padding-top:100px;">هاست لینوکس</h3> 
 
     <div class="row"> 
 
     <div class="col-lg-3"> 
 
      <img class="img-left" src="assets/img/linux-host.png" /> 
 
     </div> 
 
     <div class="col-lg-9"> 
 
      <p class="paragra"> 
 
      سرویس هاست لینوکس معمولی جهت ارائه خدمات به وب سایت هایی با بازدید و مصرف معمولی از منابع سرور است که کدنویسی و برنامه نویسی آن بر پایه سیستم عامل لینوکس و با زبان های برنامه نویسی php یا CGI یا پرل و ... می باشد. البته هاست لینوکس بدین معناست که فقط سیستم عامل نصب شده، روی سرور لینوکس است و هیچ ارتباطی با سیستم عامل کامپیوتر شخصی شما ندارد و چنانچه روی کامپیوتر شما ویندوز نصب باشد به راحتی می توانید از هاست لینوکس استفاده کنید. سرورهای این نوع سرویس، همگی در بستر شبکه ای دیتاسنتر هاست ایران در داخل ایران میزبانی می شوند و از کنترل پنل cpanel در ایران استفاده می کند و وب سرور آن آپاچی می باشد. 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <a href="#"></a> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="namayandegi">Namayandegi</div> 
 
    <div role="tabpanel" class="tab-pane" id="files">Files</div> 
 
    <div role="tabpanel" class="tab-pane" id="serverspecial">Server Special</div> 
 
    <div role="tabpanel" class="tab-pane" id="servergreen">Server Green</div> 
 
    <div role="tabpanel" class="tab-pane" id="linux">Linux</div> 
 
    <div role="tabpanel" class="tab-pane" id="server">Server</div> 
 
    </div> 
 
</div>

Il vous manque bootstrap et jQueryJavaScript fichiers de bibliothèque.