1. An Nguyen

    An Nguyen bụi Ban quản trị

    27/9/14
    #1
    2014-10-01_234157.png

    Buoc 1. Đầu tiên tạo và thêm file jquery tên là tab-nop.js vào head.cshtml
    PHP:
    1. jQuery(document).ready(function() {
    2.  
    3. jQuery('.tabs .tab-links a').on('click', function(e) {
    4.  
    5. var currentAttrValue = jQuery(this).attr('href');
    6.  
    7. // Show/Hide Tabs
    8.  
    9. jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
    10.  
    11. // Change/remove current tab to active
    12.  
    13. jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    14.  
    15. e.preventDefault();
    16.  
    17. });
    18.  
    19. });
    Mở file Themes\Classico\Views\Shared\_Root.head.cshtml
    Chèn vào đoạn
    Mã (Text):
    1. Html.AddScriptParts("~/Themes/Classico/Script/tab-nop.js");
    Bước 2. Css
    thêm đoạn css sau
    Mã:
    Mã (Text):
    1. /*----- Tabs -----*/
    2.  
    3. .tabs {width:100%;display:inline-block;}
    4.  
    5. /*----- Tab Links -----*/
    6.  
    7. /* Clearfix */
    8.  
    9. .tab-links:after {display:block;clear:both;content:'';}
    10.  
    11. .tab-links li {margin:0px 5px;float:left;list-style:none;}
    12.  
    13. .tab-links a {padding:9px 15px;display:inline-block;border-radius:3px 3px 0px 0px;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s;}
    14.  
    15. .tab-links a:hover {background:#a7cce5;text-decoration:none;}
    16.  
    17.  
    18. li.active a, li.active a:hover {background:#fff;color:#4c4c4c;}
    19.  
    20. /*----- Content of Tabs -----*/
    21.  
    22. .tab-content {padding:15px;border-radius:3px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background:#fff;}
    23.  
    24. .tab {display:none;}
    25.  
    26. .tab.active {display:block;}
    Bước 3. HTML
    Mở file Views\Product\ProductTemplate.Simple.cshtml

    Tìm code

    và thay bằng
    PHP:
    1. <div class="tabs">
    2.     <ul class="tab-links">
    3.         <li class="active"><a href="#tab-nop1">Mô tả</a></li>
    4.         <li><a href="#tab-nop2">Products specifications </a></li>
    5.         <li><a href="#tab-nop3">Product Tags</a></li>
    6.     </ul>
    7.     <div class="tab-content">
    8.         <div id="tab-nop1" class="tab active">
    9.             @if (!String.IsNullOrEmpty(Model.FullDescription))
    10.              {
    11.                  <div class="full-description" itemprop="description">
    12.                      @Html.Raw(Model.FullDescription)
    13.                  </div>
    14.               }
    15.         </div>
    16.         <div id="tab-nop2" class="tab">
    17.             @Html.Partial("_ProductSpecifications", Model.ProductSpecifications)
    18.         </div>
    19.         <div id="tab-nop3" class="tab">
    20.             @Html.Partial("_ProductTags", Model.ProductTags)
    21.         </div>
    22.     </div>
    23. </div>    

    Tham khảo từ đây:
    http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery#step-html
     
    Sửa lần cuối: 17/2/16
Đã lưu nháp Draft deleted
Đang tải...