सक्रिय वर्ग बूटस्ट्रैप द्वारा प्रबंधित नहीं किया जा रहा है

Question

मेरी active कक्षा <li> के बीच स्विच नहीं कर रही है और मुझे यकीन नहीं है कि क्यों.. यहां मेरे कोड का एक स्निपेट है:

.active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
    <script type="text/javascript">
      $(".nav li").click(function() {
        if ($(".nav li").hasClass("active")) {
          $(this).removeClass("active");
        } else {
          $(this).addClass("active");
        }
      });
</script>
</body>

जैसा कि आप देख सकते हैं कि क्लिक किए गए लिंक ग्रे रंग के होते हैं, हालांकि 'ऑरेंज' active वर्ग स्थानांतरित नहीं होता है।

मुझे लगता है कि मेरा css गलत है क्योंकि मेरा मानना है कि यह अब bootstarp द्वारा प्रबंधित किया जाता है, हालांकि मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं।

jquery html css twitter-bootstrap

1

CBreeze 20 नवम्बर 2017, 14:39

Answer 1

ऐसा इसलिए है क्योंकि जब वे क्लिक करते हैं तो सक्रिय वर्ग किसी अन्य ली पर नहीं जाता है (jQuery कोड जोड़ें)

नीचे लाइक करें:-

$(document).ready(function(){
 $('li').click(function(){
  $('li').removeClass('active');
  $(this).addClass('active');
  $(this).find('a').blur(); // to stop link hover CSS effect imidiattly (first-time)
 });
});

.sidebar ul li.active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
</body>

0

Anant Singh---Alive to Die 20 नवम्बर 2017, 14:51

Answer 2

--> कृपया अपने कस्टम जेएस में निम्नलिखित जेएस जोड़ें:

$(document).ready(function(){
  $('ul li').click(function(){
    $('li').removeClass("active");
    $(this).addClass("active");
});
});

.sidebar ul .active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
       <!--end sidebar header--> 
      <ul class="list-unstyled nav components">
        <li><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
  </div>
</body>

1

Dharmesh Patel 20 नवम्बर 2017, 15:29

Answer 3

उस सक्रिय वर्ग को एक ली से दूसरे में स्थानांतरित करने के लिए आपको एक जेएस कोड की आवश्यकता है। कृपया निम्नलिखित देखें

.sidebar ul .active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
    <script>
      $('.components li').click(function(){
          $('.components li').removeClass('active');
          $(this).addClass('active');
          $(this).find('a').blur()
      })
    </script>
</body>

0

Vipin Kumar 20 नवम्बर 2017, 14:51

सक्रिय वर्ग बूटस्ट्रैप द्वारा प्रबंधित नहीं किया जा रहा है

3 जवाब

नए सवाल

jquery