切換功能無法正常工作時，用戶點擊產品盒

-2

$(document).ready(function(e) { 
 
\t $('.subBox').click(function(e) { 
 
\t \t $(this).addClass('active'); 
 
\t \t if($(this).hasClass('active')) 
 
\t \t { 
 
\t \t \t $(this).find('.addtocart').addClass('active addedtocart').html('<i class="carticon"></i>Added to Cart'); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t //$(this).removeClass('active'); 
 
\t \t \t $(this).find('.addtocart').removeClass('active addedtocart').html('<i class="carticon"></i>Add to Cart'); 
 
\t \t \t //$(this).next('.addtocart').removeClass('active'); 
 
\t \t \t //$(this).next('.addtocart').removeClass('addedtocart'); 
 
\t \t \t //$(this).next('.addtocart').html('<i class="carticon"></i>Add to Cart'); 
 
\t \t } 
 
    }); 
 
\t $('#entire-grp-btn').click(function(e) { 
 
     $(this).toggleClass(''); 
 
    }); 
 
});

*{margin:0px; padding:0px;} 
 
body{font-family:'Lato', Arial, sans-serif !important; font-size:14px !important;} 
 
.PL0{padding-left:0px;} 
 
.PR0{padding-right:0px;} 
 
.FL{float:left;} 
 
.FR{float:right;} 
 
.CL{clear:both;} 
 
.DN{display:none;} 
 
.PT20{padding-top:20px;} 
 
.PR0{padding-right:0px;} 
 
.DIB{display:inline-block;} 
 
.TAC{text-align:center;} 
 
.MB10{margin-bottom:10px;} 
 
.MT3{margin-top:3px;} 
 
.MT7{margin-top:7px;} 
 
.MT5{margin-top:5px;} 
 
.MT10{margin-top:10px;} 
 
.PLR20{padding:0px 20px;} 
 
.PT10{padding-top:10px;} 
 
.clearfix{display:block;} 
 
.CTR{text-align: center;} 
 
.disN{display:none;} 
 
.FL{float:left;} 
 
.FR{float:right;} 
 
.PR,.highlight{ position: relative;} 
 
.CL{clear:both;font-size: 0;line-height: 0;} 
 
.clearfix:after{height: 0;clear: both;} 
 
.clearfix{display: block;} 
 
.DN{display:none;} 
 
.DIB{display:inline-block;} 
 
.DB{display:block;} 
 
.TAC{text-align:center;} 
 

 
.MT-8{margin-top: -8px;} 
 
.MT3{margin-top: 3px;} 
 
.MT5{margin-top: 5px;} 
 
.MT7{margin-top: 7px;} 
 
.MT12{margin-top: 12px;} 
 
.MT10{margin-top: 10px;} 
 
.MT15{margin-top:15px;} 
 
.MT20{margin-top:20px;} 
 
.ML15{margin-left: 15px;} 
 
.MT15{margin-top: 15px;} 
 
.ML10{margin-left: 10px;} 
 
.ML20{margin-left: 20px;} 
 
.MB10{margin-bottom:10px;} 
 
.MB15{margin-bottom: 15px;} 
 
.MR3{margin-right: 3px;} 
 
.MR8{margin-right:8px;} 
 
.MR10{margin-right: 10px;} 
 
.MR20{margin-right:20px;} 
 

 
.PA5{padding: 5px;} 
 
.PA15{padding: 15px;} 
 
.PA20{padding: 20px;} 
 
.PT7{padding-top: 7px;} 
 
.PT10{padding-top: 10px;} 
 
.PT20{padding-top:20px;} 
 
.PT30{padding-top: 30px;} 
 
.PB15{padding-bottom: 15px;} 
 
.PB10{padding-bottom:10px;} 
 
.PB20{padding-bottom: 20px;} 
 
.PB30{padding-bottom: 30px;} 
 
.PR0{padding-right:0px;} 
 
.PR5{padding-right: 5px;} 
 
.PR10{padding-right:10px;} 
 
.PR12{padding-right: 12px;} 
 
.PR20{padding:0px 20px;} 
 
.PL0{padding-left:0px;} 
 
.PL5{padding-left: 5px;} 
 
.PL10{padding-left:10px;} 
 
.PL12{padding-left:12px;} \t 
 

 
@font-face{font-family: 'WebRupee'; src: url('fonts/WebRupee.V2.0.eot'); src: local('WebRupee'), url('fonts/WebRupee.V2.0.ttf') format('truetype'), url('fonts/WebRupee.V2.0.woff') format('woff'), url('fonts/WebRupee.V2.0.svg') format('svg');font-weight: normal;font-style: normal;} 
 
.rupee{font-family:'WebRupee';font-size:12px;font-style:normal;font-weight:500;} 
 
.rupee20{font-family:'WebRupee';font-size:20px;font-style:normal;font-weight:600;} 
 

 
.courseslink{list-style:none; display:block; padding:15px 0px; border-bottom:1px solid #ccc; text-align:center;} 
 
.courseslink li{display:inline-block; padding:0px 40px; border-right:1px solid #ccc;} 
 
.courseslink li:last-child{border-right:0px;} 
 
.courseslink li a{font:500 14px/16px 'Lato',Arial,sans-serif; color:#0081cd; text-decoration:none; padding:5px 10px;} 
 
.courseslink li a:hover{background:#0081cd; border-radius:3px; color:#fff;} 
 
.courseMainHdg{font:600 20px/26px 'Lato',Arial,sans-serif; color:#666; text-align:center; margin:0px; padding:10px 0px;} 
 

 
#exTab .nav-pills{border-bottom:5px solid #02356a;} 
 
#exTab .nav-pills> li{margin-left:0px !important;} 
 
#exTab .nav-pills > li > a{border-radius: 0; cursor:pointer;} 
 
#exTab .nav-pills> #exTab li>a, #exTab .nav-pills>li>a:focus, #exTab .nav-pills>li>a:hover{color: #fff; background: #02356a;} 
 
#exTab .nav-pills> li.active>a, #exTab .nav-pills>li.active>a:focus, #exTab .nav-pills>li.active>a:hover{color: #fff; background: #02356a;} 
 
#exTab .tab-content{color : #666; background:#FFF; border:1px solid #ccc; border-top:0px; padding:10px; margin-bottom:15px; display:block !important;} 
 

 
.single-Box{background:#FFF; border:1px solid #ccc; padding:10px; margin-bottom:15px;} 
 

 
.subcontainer{margin:0px; padding:0px; list-style:none; display:block;} 
 
.subcontainer li{display:inline-block; padding:5px 12px 5px 0px; vertical-align:top;} 
 
.subcontainer li .subBox{width:270px; background:#FFF; cursor:pointer;} 
 
.subcontainer li .subBox .active{border:2px solid #0081cd; border-top:0px;} 
 
.subcontainer li .subBox:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);} 
 
.subcontainer li .subBox:hover .subDetails{border:2px solid #0081cd; border-top:0px;} 
 

 
.subcontainer li .subBox h3{background:#0081cd; color:#fff; font:600 20px/20px 'Lato',Arial,sans-serif; text-align:center; margin:0px; padding:15px 0px;} 
 
.subDetails{display:block; border:2px solid #e5e5e5; border-top:0px;} /*8border:3px solid #0081cd; e4f5ff*/ 
 
.subDetails > ul{ list-style:none; margin:0px; padding:0px; display:block;} 
 
.subDetails > ul li{display:block; padding:7px 15px; background:#F0f0f0; border-bottom:1px solid #d5d4d4;} 
 
.subDetails .coursetime{background:#edecec; border-bottom:1px solid #d5d4d4; font:400 15px/20px 'Lato',Arial,sans-serif; color:#02356a; text-align:center; display:block; margin:0px !important; padding:14px 0px !important;} 
 
.subDetails .coursetime strong{font-weight:900;} 
 
.subDetails > ul li .rightIcon{display:inline-block;background:url(http://cdn.topperlearning.com/topper/img/checked_icon.png) no-repeat; width: 16px;height: 16px; padding-top:5px; position:relative; margin:2px 10px 0px 5px; text-align: center;float:left;} 
 
.subPrice{font:900 28px/30px 'Lato',Arial,sans-serif; color:#02356a;text-align:center; display:block; padding:8px 0px 5px; display:block;} 
 
/*single product Add to Cart Button*/ 
 

 
.carticon{background:url(images/cart_icon_2.png) no-repeat;display:inline-block; width:20px;height:20px; padding-top:5px; position:absolute; margin:0px 0px 0px -25px; text-align: center; outline:none; text-align:none;} 
 
.addtocart:focus,.addtocart:active,.addtocart:hover{text-decoration:none; outline:none; box-shadow:none; border:0px !important;} 
 
.addtocart{background:#f58000; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px !important; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;} 
 
/*single product Add to Cart Button*/ 
 

 
/*single product Added to Cart Button*/ 
 
.addedtocart{background:#b16a01; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;} 
 

 
.dsc-offer{background:#edecec; padding:5px 0px; border-top:1px dashed #ccc;} 
 
.dsc-offer .discount-txt{color:#00c032; text-align:center; font:600 22px/24px 'Lato',Arial, sans-serif; display:block;} 
 
.dsc-offer > p{margin:0px; padding:0px 5px; color:#666; text-align:center; font:500 14px/18px 'Lato',Arial, sans-serif; } 
 

 
/*Entire Group Box*/ 
 
.entire-group .coursetime,.entire-group li{background:#e4f5ff !important;} 
 
.entire-group .addtocart{background:#02356a !important;} 
 

 
@media screen and (max-width: 767px) { 
 
.courseslink li{padding:0px 5px;} 
 
.courseslink li a{padding:5px;} 
 
.subcontainer{display:flex;} 
 
.tab-content{overflow-x:scroll;} 
 
#exTab .tab-conten{overflow-x:scroll;} 
 
/*.tab-content-store{ overflow-x:scroll;}*/ 
 
} 
 
@media only screen and (device-width: 414px), (device-width: 412px) , (device-width: 375px) , (device-width: 360px) , (device-width: 320px){ 
 
.courseslink li{padding: 0px 0px;} 
 
.courseslink li a{padding:5px 2px;} 
 
} 
 

 
@media only screen and (device-width: 320px){ 
 
.subcontainer li .subBox{width: 255px;} 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
<div class="container-fluid section5"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12"> 
 
      <h2 class="courseMainHdg" id="ca-cpt">CA CPT</h2> 
 
      <div id="exTab"> \t 
 
       <ul class="nav nav-pills"> 
 
        <li class="active"> 
 
         <a data-target="#cacptg1" data-toggle="tab">Group 1</a> 
 
        </li> 
 
        <li> 
 
         <a data-target="#cacptg2" data-toggle="tab">Group 2</a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content clearfix"> 
 
       \t <div class="tab-pane active" id="cacptg1"> 
 
        \t <ul class="subcontainer"> 
 
         \t <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Accounting</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button class="addtocart"><i class="carticon"></i><span class="carttext">Add to Cart</span></button> 
 
             </div> 
 
             <div class="dsc-offer"> 
 
             \t <span class="discount-txt">10% discount</span> 
 
              <p>on purchesing <strong>Ethics & Communication</strong></p> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Law</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Ethics & Communication</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Costing</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Financial Management</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Direct Tax</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Indirect Tax</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox entire-group"> 
 
           \t <h3>Entire Group I</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart" id="entire-grp-btn"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
        <div class="tab-pane" id="cacptg2"> 
 
        \t <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

要求：當產品盒用戶點擊，「添加到購物車」按鈕，必須改變爲「添加到購物車「和框將被應用藍色邊框作爲選定的產品。並在取消選擇時再次反轉。

結果： enter image description here

來源

2017-04-27 wajidullah Khan

你一直在增加active類，並檢查是否元素有這個類後直接。

首先檢查，僅比添加/刪除

$(document).ready(function(e) { 
 
\t $('.subBox').click(function(e) { 
 
    \t var btn = $(this).find('.addtocart'); 
 
    
 
\t \t if(!btn.hasClass('active')) 
 
\t \t { 
 
\t \t \t btn.addClass('active addedtocart').html('<i class="carticon"></i>Added to Cart'); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t btn.removeClass('active addedtocart').html('<i class="carticon"></i>Add to Cart'); 
 
\t \t } 
 
    }); 
 
\t $('#entire-grp-btn').click(function(e) { 
 
     $(this).toggleClass(''); 
 
    }); 
 
});

*{margin:0px; padding:0px;} 
 
body{font-family:'Lato', Arial, sans-serif !important; font-size:14px !important;} 
 
.PL0{padding-left:0px;} 
 
.PR0{padding-right:0px;} 
 
.FL{float:left;} 
 
.FR{float:right;} 
 
.CL{clear:both;} 
 
.DN{display:none;} 
 
.PT20{padding-top:20px;} 
 
.PR0{padding-right:0px;} 
 
.DIB{display:inline-block;} 
 
.TAC{text-align:center;} 
 
.MB10{margin-bottom:10px;} 
 
.MT3{margin-top:3px;} 
 
.MT7{margin-top:7px;} 
 
.MT5{margin-top:5px;} 
 
.MT10{margin-top:10px;} 
 
.PLR20{padding:0px 20px;} 
 
.PT10{padding-top:10px;} 
 
.clearfix{display:block;} 
 
.CTR{text-align: center;} 
 
.disN{display:none;} 
 
.FL{float:left;} 
 
.FR{float:right;} 
 
.PR,.highlight{ position: relative;} 
 
.CL{clear:both;font-size: 0;line-height: 0;} 
 
.clearfix:after{height: 0;clear: both;} 
 
.clearfix{display: block;} 
 
.DN{display:none;} 
 
.DIB{display:inline-block;} 
 
.DB{display:block;} 
 
.TAC{text-align:center;} 
 

 
.MT-8{margin-top: -8px;} 
 
.MT3{margin-top: 3px;} 
 
.MT5{margin-top: 5px;} 
 
.MT7{margin-top: 7px;} 
 
.MT12{margin-top: 12px;} 
 
.MT10{margin-top: 10px;} 
 
.MT15{margin-top:15px;} 
 
.MT20{margin-top:20px;} 
 
.ML15{margin-left: 15px;} 
 
.MT15{margin-top: 15px;} 
 
.ML10{margin-left: 10px;} 
 
.ML20{margin-left: 20px;} 
 
.MB10{margin-bottom:10px;} 
 
.MB15{margin-bottom: 15px;} 
 
.MR3{margin-right: 3px;} 
 
.MR8{margin-right:8px;} 
 
.MR10{margin-right: 10px;} 
 
.MR20{margin-right:20px;} 
 

 
.PA5{padding: 5px;} 
 
.PA15{padding: 15px;} 
 
.PA20{padding: 20px;} 
 
.PT7{padding-top: 7px;} 
 
.PT10{padding-top: 10px;} 
 
.PT20{padding-top:20px;} 
 
.PT30{padding-top: 30px;} 
 
.PB15{padding-bottom: 15px;} 
 
.PB10{padding-bottom:10px;} 
 
.PB20{padding-bottom: 20px;} 
 
.PB30{padding-bottom: 30px;} 
 
.PR0{padding-right:0px;} 
 
.PR5{padding-right: 5px;} 
 
.PR10{padding-right:10px;} 
 
.PR12{padding-right: 12px;} 
 
.PR20{padding:0px 20px;} 
 
.PL0{padding-left:0px;} 
 
.PL5{padding-left: 5px;} 
 
.PL10{padding-left:10px;} 
 
.PL12{padding-left:12px;} \t 
 

 
@font-face{font-family: 'WebRupee'; src: url('fonts/WebRupee.V2.0.eot'); src: local('WebRupee'), url('fonts/WebRupee.V2.0.ttf') format('truetype'), url('fonts/WebRupee.V2.0.woff') format('woff'), url('fonts/WebRupee.V2.0.svg') format('svg');font-weight: normal;font-style: normal;} 
 
.rupee{font-family:'WebRupee';font-size:12px;font-style:normal;font-weight:500;} 
 
.rupee20{font-family:'WebRupee';font-size:20px;font-style:normal;font-weight:600;} 
 

 
.courseslink{list-style:none; display:block; padding:15px 0px; border-bottom:1px solid #ccc; text-align:center;} 
 
.courseslink li{display:inline-block; padding:0px 40px; border-right:1px solid #ccc;} 
 
.courseslink li:last-child{border-right:0px;} 
 
.courseslink li a{font:500 14px/16px 'Lato',Arial,sans-serif; color:#0081cd; text-decoration:none; padding:5px 10px;} 
 
.courseslink li a:hover{background:#0081cd; border-radius:3px; color:#fff;} 
 
.courseMainHdg{font:600 20px/26px 'Lato',Arial,sans-serif; color:#666; text-align:center; margin:0px; padding:10px 0px;} 
 

 
#exTab .nav-pills{border-bottom:5px solid #02356a;} 
 
#exTab .nav-pills> li{margin-left:0px !important;} 
 
#exTab .nav-pills > li > a{border-radius: 0; cursor:pointer;} 
 
#exTab .nav-pills> #exTab li>a, #exTab .nav-pills>li>a:focus, #exTab .nav-pills>li>a:hover{color: #fff; background: #02356a;} 
 
#exTab .nav-pills> li.active>a, #exTab .nav-pills>li.active>a:focus, #exTab .nav-pills>li.active>a:hover{color: #fff; background: #02356a;} 
 
#exTab .tab-content{color : #666; background:#FFF; border:1px solid #ccc; border-top:0px; padding:10px; margin-bottom:15px; display:block !important;} 
 

 
.single-Box{background:#FFF; border:1px solid #ccc; padding:10px; margin-bottom:15px;} 
 

 
.subcontainer{margin:0px; padding:0px; list-style:none; display:block;} 
 
.subcontainer li{display:inline-block; padding:5px 12px 5px 0px; vertical-align:top;} 
 
.subcontainer li .subBox{width:270px; background:#FFF; cursor:pointer;} 
 
.subcontainer li .subBox .active{border:2px solid #0081cd; border-top:0px;} 
 
.subcontainer li .subBox:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);} 
 
.subcontainer li .subBox:hover .subDetails{border:2px solid #0081cd; border-top:0px;} 
 

 
.subcontainer li .subBox h3{background:#0081cd; color:#fff; font:600 20px/20px 'Lato',Arial,sans-serif; text-align:center; margin:0px; padding:15px 0px;} 
 
.subDetails{display:block; border:2px solid #e5e5e5; border-top:0px;} /*8border:3px solid #0081cd; e4f5ff*/ 
 
.subDetails > ul{ list-style:none; margin:0px; padding:0px; display:block;} 
 
.subDetails > ul li{display:block; padding:7px 15px; background:#F0f0f0; border-bottom:1px solid #d5d4d4;} 
 
.subDetails .coursetime{background:#edecec; border-bottom:1px solid #d5d4d4; font:400 15px/20px 'Lato',Arial,sans-serif; color:#02356a; text-align:center; display:block; margin:0px !important; padding:14px 0px !important;} 
 
.subDetails .coursetime strong{font-weight:900;} 
 
.subDetails > ul li .rightIcon{display:inline-block;background:url(http://cdn.topperlearning.com/topper/img/checked_icon.png) no-repeat; width: 16px;height: 16px; padding-top:5px; position:relative; margin:2px 10px 0px 5px; text-align: center;float:left;} 
 
.subPrice{font:900 28px/30px 'Lato',Arial,sans-serif; color:#02356a;text-align:center; display:block; padding:8px 0px 5px; display:block;} 
 
/*single product Add to Cart Button*/ 
 

 
.carticon{background:url(images/cart_icon_2.png) no-repeat;display:inline-block; width:20px;height:20px; padding-top:5px; position:absolute; margin:0px 0px 0px -25px; text-align: center; outline:none; text-align:none;} 
 
.addtocart:focus,.addtocart:active,.addtocart:hover{text-decoration:none; outline:none; box-shadow:none; border:0px !important;} 
 
.addtocart{background:#f58000; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px !important; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;} 
 
/*single product Add to Cart Button*/ 
 

 
/*single product Added to Cart Button*/ 
 
.addedtocart{background:#b16a01; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;} 
 

 
.dsc-offer{background:#edecec; padding:5px 0px; border-top:1px dashed #ccc;} 
 
.dsc-offer .discount-txt{color:#00c032; text-align:center; font:600 22px/24px 'Lato',Arial, sans-serif; display:block;} 
 
.dsc-offer > p{margin:0px; padding:0px 5px; color:#666; text-align:center; font:500 14px/18px 'Lato',Arial, sans-serif; } 
 

 
/*Entire Group Box*/ 
 
.entire-group .coursetime,.entire-group li{background:#e4f5ff !important;} 
 
.entire-group .addtocart{background:#02356a !important;} 
 

 
@media screen and (max-width: 767px) { 
 
.courseslink li{padding:0px 5px;} 
 
.courseslink li a{padding:5px;} 
 
.subcontainer{display:flex;} 
 
.tab-content{overflow-x:scroll;} 
 
#exTab .tab-conten{overflow-x:scroll;} 
 
/*.tab-content-store{ overflow-x:scroll;}*/ 
 
} 
 
@media only screen and (device-width: 414px), (device-width: 412px) , (device-width: 375px) , (device-width: 360px) , (device-width: 320px){ 
 
.courseslink li{padding: 0px 0px;} 
 
.courseslink li a{padding:5px 2px;} 
 
} 
 

 
@media only screen and (device-width: 320px){ 
 
.subcontainer li .subBox{width: 255px;} 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
<div class="container-fluid section5"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12"> 
 
      <h2 class="courseMainHdg" id="ca-cpt">CA CPT</h2> 
 
      <div id="exTab"> \t 
 
       <ul class="nav nav-pills"> 
 
        <li class="active"> 
 
         <a data-target="#cacptg1" data-toggle="tab">Group 1</a> 
 
        </li> 
 
        <li> 
 
         <a data-target="#cacptg2" data-toggle="tab">Group 2</a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content clearfix"> 
 
       \t <div class="tab-pane active" id="cacptg1"> 
 
        \t <ul class="subcontainer"> 
 
         \t <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Accounting</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button class="addtocart"><i class="carticon"></i><span class="carttext">Add to Cart</span></button> 
 
             </div> 
 
             <div class="dsc-offer"> 
 
             \t <span class="discount-txt">10% discount</span> 
 
              <p>on purchesing <strong>Ethics & Communication</strong></p> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Law</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Ethics & Communication</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Costing</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Financial Management</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Direct Tax</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox"> 
 
           \t <h3>Indirect Tax</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
          <li> 
 
          \t <div class="subBox entire-group"> 
 
           \t <h3>Entire Group I</h3> 
 
            <div class="subDetails"> 
 
            \t <h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4> 
 
            \t <ul> 
 
              <li><i class="rightIcon"></i> Live Doubt Session</li> 
 
              <li><i class="rightIcon"></i> Previous Year Question Papers</li> 
 
              <li><i class="rightIcon"></i> Recorded Version</li> 
 
              <li><i class="rightIcon"></i> Sample Papers</li> 
 
              <li><i class="rightIcon"></i> Textbook Solutions</li> 
 
             </ul> 
 
             <div class="subPrice"><span class="rupee20">₹</span>8499</div> 
 
             <div class="TAC MB10"> 
 
\t           <button onClick="javascript:void(0);" class="addtocart" id="entire-grp-btn"><i class="carticon"></i>Add to Cart</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
        <div class="tab-pane" id="cacptg2"> 
 
        \t <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-04-27 11:06:24 Justinas

太感謝你了，親愛的，它現在的工作，感謝給與描述的解決方案。 –

切換功能無法正常工作時，用戶點擊產品盒

回答

相關問題