de-vraag
Lebih
Question

Bagaimana membuka tab tertentu dari bootstrap nav tab di klik particuler link menggunakan jQuery?

Saya baru jquery dan bootstrap,jadi silakan mempertimbangkan kesalahan-kesalahan saya.Saya telah menciptakan sebuah bootstrap modal untuk login dan pendaftaran. Ini berisi dua nav-tab yang disebut sebagai login dan pendaftaran.Saya memiliki dua tombol yang popup yang sama jendela Modal, tapi tampilan tab yang berbeda di dalam jendela Modal. Di setiap tab adalah sebuah bentuk dengan sejumlah input. Masalah saya adalah mendapatkan modal muncul dengan login tab dibuka di modal ketika saya klik pada 'login' tombol dan tab pendaftaran dibuka ketika saya klik pada 'daftar' tombol pada halaman saya.

Ini adalah link 2 di mana modal membuka:

<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font>
</big></a></div>

<div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font>
</big></a>

Berikut adalah kode dari tab dan isinya(saya menghindari yang tidak perlu kode berikut):

 <div class="tabbable" >
      <ul class="nav nav-tabs" ><!--tabs-->
        <li class="active" style="position:absolute;margin-left:0px;" id="logintab">
        <a href="#pane_login" data-toggle="tab">Login</a></li>
        <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>

      </ul>
      <div class="tab-content"><!--login tab content-->
         <div id="pane_login" class="tab-pane active">
             <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">

              </form>

        </div><!--/pane_login-->

        <div id="pane_reg" class="tab-pane"><!--registration tab content-->
           <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">

            </form>
         </div>
        </div><!-- /.tab-content -->
</div><!-- /.tabbable -->

Saya pikir hal ini dapat dilakukan melalui jquery dengan mudah.Tapi saya tidak tahu persis bagaimana melakukannya. Jadi,mohon ada yang bisa membantu saya untuk memecahkan masalah saya.Terima kasih sebelumnya ?

Pemrograman
javascript
html
jquery
css
twitter-bootstrap
Solution / Answer

Menerapkan pemilih dari .nav-tab tampaknya bekerja

HTML adalah

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

Script adalah 

$(document).ready(function(){
  activaTab('aaa');
});

function activaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

Mosh Feu
Mosh Feu
Jawaban edit 23 Maret 2016 в 9:15
133

HTML:

<a href="PageName.php#tabID">link to other page tab</a>

Javascript:

window.onload = function(){  

    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }

    //Change hash for page-reload
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
        window.location.hash = e.target.hash;
    }); 
}
ponury-kostek
ponury-kostek
Jawaban edit 15 Mei 2018 в 10:28
11

Mungkin anda akses melalui tab Id juga, Tapi id yang unik untuk halaman yang sama. Berikut adalah contoh untuk yang sama

$('#product_detail').tab('show');

Dalam contoh di atas #product_details adalah nav tab id

8

Terima kasih untuk jawaban di atas , berikut adalah kode jQuery yang bekerja sekarang:

      $(".header-login-li").click(function(){
        activaTab('pane_login');                
      });

      $(".header-register-li").click(function(){
        activaTab('pane_reg');
        $("#reg_log_modal_header_text").css()
      });

      function activaTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
      };
gef
gef
Jawaban edit 13 Februari 2019 в 5:05
3

Hi Coba yang satu ini kawan!

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
               // save current clicked tab in local storage
                localStorage.setItem('lastActiveTab', $(this).attr('href'));
            });
            //get last active tab from local storage
            var lastTab = localStorage.getItem('lastActiveTab');
alert(lastTab +"tab was last active")
            if (lastTab) {
                $('[href="' + lastTab + '"]').tab('show');
            }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
 <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>
</div>
3 
    function updateURL(url_params) {
        if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + url_params;
        window.history.replaceState({path:newurl},'',newurl);
        }
    }

    function setActiveTab(tab) {
        $('.nav-tabs li').removeClass('active');
        $('.tab-content .tab-pane').removeClass('active');

        $('a[href="#tab-' + tab + '"]').closest('li').addClass('active');
        $('#tab-' + tab).addClass('active');
    }

    // Set active tab
    $url_params = new URLSearchParams(window.location.search);

    // Get active tab and remember it
    $('a[data-toggle="tab"]')
        .on('click', function() {
        $href = $(this).attr('href')
        $active_tab = $href.replace('#tab-', '');

        $url_params.set('tab', $active_tab);
        updateURL($url_params.toString());
    });

    if ($url_params.has('tab')) {
        $tab = $url_params.get('tab');
        $tab = '#tab-' + $tab;
        $myTab = JSON.stringify($tab);
        $thisTab = $('.nav-tabs a[href=' + $myTab  +']');
        $('.nav-tabs a[href=' + $myTab  +']').tab('show');
    }
1

Mungkin saya sarankan php+css solusi yang saya gunakan di situs saya? It's sederhana dan tidak ada masalah js :)

url ke halaman ini: <a href="page.php?tab=menu1">link untuk menu1</a>

<?
$tab = $_GET['tab'];
?>
<ul class="nav nav-tabs">
  <li class="<? if ($tab=='menu1' OR $tab=='menu2') 
{
echo "";
} 
else {
echo "active";
}
?>"><a data-toggle="tab" href="#home">Prodotti</a></li>
  <li class="<? if ($tab=='menu1') 
{
echo "active";
} 
?>"><a data-toggle="tab" href="#menu1">News</a></li>
  <li class="<? if ($tab=='menu2') 
{
echo "active";
} 
?>"><a data-toggle="tab" href="#menu2">Gallery</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') 
{
echo "";
} 
else {
echo "in active";
}
?>
">
    <h3>Prodotti</h3>
    <p>Contenuto della pagina, zona prodotti</p>
  </div>
  <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') 
{
echo "in active";
} 
?>">
    <h3>News</h3>
    <p>Qui ci saranno le news.</p>
  </div>
  <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') 
{
echo "in active";
} 
?>">
    <h3>Gallery</h3>
    <p>Qui ci sarà la gallery</p>
  </div>
</div>
0

Tidak yakin jika saya mengerti benar tapi di sini adalah cuplikan yang saya gunakan untuk buka link dari Bootstrap menu tab:

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
  <li><a href="#bar" data-toggle="tab">Bar</a></li>
  <li><a href="baz.html" class="external">Baz</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="foo">Foo</div>
  <div class="tab-pane" id="bar">Bar</div>
</div>

Javascript

$('.nav a:not(".external")').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
-1
Related communities 7
JavaScript Indonesia
14 533 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn
HTML dan CSS Indonesia
4 094 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
jQuery Indonesia
343 pengguna
Learning jQuery & Solve Problem
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
306 pengguna
Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
HTML INDONESIA
109 pengguna
PHP HTML Indonesia
59 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^