ブートストラップタブが異なるタブ間で切り替わるようではない

Question

私は単純なタブを作ったが、今はこのタブが異なるタブ名の間で切り替わるようには見えないというこの問題に直面している。ここであなたが見て、私のタブをカスタマイズすることができますリンクは以下のとおりです。 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> 

それでは、どのように私はここでは、このP

Answer 1

を修正することができますが、解決策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>

で行きます

あなたがいないブートストラップおよびjQueryJavaScriptライブラリファイル。