bootstrap打开标签链接

2 回答

• 1

  只需使用 $(document).ready() 而不是 load . 结帐this demo

  回复于 2024-05-05T19:25:05+08:00
• 5

  将 $(document).load 替换为 $(document).ready

  $(document).ready(function() {
    $('#section-A a').click(function(e) {
      e.preventDefault();
      $('a[href="' + $(this).attr('href') + '"]').tab('show');
    })
  });
  

  <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>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  
  <section id="section-A">
  
    <blockquote class="blockquote">
      <p>Some text here ...
        <a href="#tab-1">Tab 1 hyperlink text</a> blablabla
        <a href="#tab-2">Tab 2 hyperlink text</a> and blabla
        <a href="#tab-3">Tab 3 hyperlink text</a> and blabla
        <a href="#tab-4">Tab 4 hyperlink text</a> and bla.
      </p>
    </blockquote>
  
  </section>
  
  
  <div id="section-B">
  
    <ul class="nav nav-pills">
      <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1 title</a></li>
      <li class=""><a href="#tab-2" data-toggle="tab">Tab 2 title</a></li>
      <li class=""><a href="#tab-3" data-toggle="tab">Tab 3 title</a></li>
      <li class=""><a href="#tab-4" data-toggle="tab">Tab 4 title</a></li>
    </ul>
  
    <div class="tab-content">
      <div id="tab-1" class="tab-pane active">Tab 1 Lorem ipsum …</div>
      <div id="tab-2" class="tab-pane">Tab 2 Lorem ipsum …</div>
      <div id="tab-3" class="tab-pane">Tab 3 Lorem ipsum …</div>
      <div id="tab-4" class="tab-pane">Tab 4 Lorem ipsum …</div>
    </div>
  
  </div>
  

  回复于 2024-05-05T19:25:05+08:00