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>

那么如何解决这个问题

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>

您缺少 bootstrap 和 jQuery JavaScript库文件。

Bootstrap选项卡似乎没有在不同选项卡

1 个答案: