ट्विटर बूटस्ट्रैप टैब काम नहीं कर रहा है: जब मैं उन पर क्लिक करता हूं तो कुछ भी नहीं होता है

Question 1

मैं निम्नलिखित कोड में ट्विटर बूटस्ट्रैप टैब को लागू करने की कोशिश कर रहा हूं, लेकिन यह काम नहीं करता है। टैब प्रदर्शित होते हैं, लेकिन जब मैं उन पर क्लिक करता हूं तो कुछ भी नहीं होता है। नीचे केवल वही कोड है जिसका मैं उपयोग कर रहा हूं। अन्य सभी CSS / JS स्क्रिप्ट्स को Twitter बूटस्ट्रैप फ्रेमवर्क से कॉपी किया जाता है।

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

Question 2

आपको अपने कोड में टैब प्लगइन जोड़ना होगा

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

खैर, यह काम नहीं किया। मैंने कुछ परीक्षण किए और जब इसने काम करना शुरू किया:

ले जाया गया (1.7 अद्यतन) jQuery स्क्रिप्ट करने के लिए <head>खंड में
data-toggle="tab"लिंक और आईडी के लिए जोड़ा गया<ul>टैब तत्व के
को बदल $(".tabs").tabs();दिया$("#tabs").tab();
और कुछ अन्य चीजें जो मायने नहीं रखतीं

यहाँ एक कोड है

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 3

प्रमुख तत्वों में शामिल हैं:

class="nav nav-tabs"और data-tabs="tabs"कीul
data-toggle="tab"और href="#orange"कीa
class="tab-content"कीdiv सामग्री के
class="tab-pane"और idमदों की div की

पूरा कोड नीचे दिया गया है:

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

Question 4

हाल ही में उनके ऑनलाइन दिशानिर्देशों का पालन करने में बूटस्ट्रैप टैब के साथ एक समस्या थी , लेकिन वर्तमान में उनके मार्कअप उदाहरण में एक त्रुटि है data-tabs="tabs" <ul>तत्व पर गायब है। इसके बिना data-toggleलिंक का उपयोग किए बिना काम नहीं करता है।"

Question 5

मेरे पास भी यही समस्या है, लेकिन ऊपर कुछ जवाब मेरे लिए मुश्किल हो सकते हैं।

मुझे अन्य उत्तर मिला कि शायद आपका सवाल हल हो जाए ट्विटर बूटस्ट्रैप Js (टैब, पॉपअप, ड्रॉपडाउन) Drupal में काम नहीं कर रहा है

jquery.jsपहले जगहbootstrap.tab.js

Question 6

आप data-toggle="tab"अपने मेनू के डेटा-टैग को याद कर रहे हैं, इसलिए आपकी स्क्रिप्ट यह नहीं बता सकती कि आपके टैब स्विच कहां हैं:

एचटीएमएल

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Question 7

मैंने अभी एंकर टैग में डेटा-टॉगल = "टैब" तत्व जोड़कर इस मुद्दे को ठीक किया

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

और सिर अनुभाग http://code.jquery.com/jquery-1.7.1.js '> में निम्नलिखित जोड़ा गया

Question 8

मैंने बूटस्ट्रैप के दस्तावेज़ के कोड इस प्रकार आज़माए:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

और यह काम करता है। लेकिन जब मैं इन दो पोस्ट को स्विच करता हूं <script src...>, तो यह काम नहीं करता है। तो कृपया बूटस्ट्रैप.जेएस से पहले अपनी jquery स्क्रिप्ट को लोड करना याद रखें।

Question 9

मेरे लिए, समस्या यह थी कि मैं bootstrap.min.css को शामिल नहीं कर रहा था (मैं केवल बूटस्ट्रैप-उत्तरदायी -min.css शामिल था)।

Question 10

दरअसल, इसे करने का एक और आसान तरीका है। यह मेरे लिए काम करता है लेकिन मुझे आप लोगों पर यकीन नहीं है। यहाँ मुख्य बात, प्रत्येक (टैब-फलक) में केवल FADE जोड़ रहा है और यह काम करेगा। इसके अलावा, आपको स्क्रिप्ट फ़ंक्शन या jQuery के जो भी संस्करण की आवश्यकता नहीं है। यहाँ मेरा कोड है ... आशा है कि यह आप सभी के लिए काम करेगा।

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>

Question 11

अन्य उदाहरणों में से किसी ने भी यह हल किया:

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

Question 12

जब तक मैं बूटस्ट्रैप-टैब.जेएस डाउनलोड नहीं करता था, तब तक मुझे यही समस्या थी और इसे मेरी स्क्रिप्ट में शामिल करें, यहाँ से https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

जूलरी के ठीक नीचे बूटस्ट्रैप-टैब शामिल करें

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

अंतिम कोड इस तरह देखा:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 13

चूंकि मैं Bootstrap Javascript Modulesसंपूर्ण लोड करने के बजाय काम कर रहा हूं Bootstrap Javascript, इसलिए मेरे टैब काम नहीं कर रहे थे क्योंकि मैं फाइल लोड load/include/करना भूल गया था node_modules/bootstrap/js/tab.js।

इसे शामिल करने के बाद, यह काम किया ...

शुभ लाभ

Question 14

bootstrap.jsशरीर के मुख्य भाग से अंत तक जोड़ने के लिए बस स्क्रिप्ट टैग की प्रतिलिपि बनाएँ । तब टैब को सक्रिय करने के लिए स्क्रिप्ट के बिना भी सबकुछ ठीक होना चाहिए।