我需要使用chico-ui框架来运行标签

时间:2015-08-05 12:28:10

标签: javascript jquery html tabs

我似乎无法使标签生效..我必须使用this

我正在做文件说的内容,但我不确定我是否使用了正确的html标记/ jquery ......

这里是API

这就是我所拥有的:



$( document ).ready(function() {
		
		var tabs = $("#tabs").Tabs();
		
     });

/**
 * Tab Navigator
 */
.ch-tabs {
  margin: 10px 0;
}
.ch-tabs .ch-tabs-triggers {
  position: relative;
  top: 1px;
  z-index: 10;
  padding: 0;
  margin: 0 0 0 10px;
  list-style: none;
  overflow: hidden;
}
.ch-tabs .ch-tabs-triggers li {
  cursor: pointer;
  display: inline;
  margin: 0;
}

/* Triggers */
.ch-tab {
  border: 1px solid #dedede;
  display: inline-block;
  padding: 3px 12px;
  margin: 0;
  text-decoration: none !important;
  color: #333 !important;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}
.ch-tab:hover {
  background-color: #f0f0f0;
}
.ch-tab:active {
  background-color: #f0f0f0;
}

/* Trigger ON */
.ch-tabs .ch-tab.ch-expandable-trigger-on,
.ch-tabs .ch-tab.ch-expandable-trigger-on:hover {
  background-color: #f0f0f0;
  background-image: -webkit-linear-gradient(#f0f0f0, #fff);
  background-image: linear-gradient(#f0f0f0, #fff);
  border-bottom: 1px solid #fff;
  cursor: default;
  font-weight: bold;
  box-shadow: 2px 0 2px rgba(255, 255, 255, 0.5);
}

.lt-ie10 .ch-tabs .ch-tab.ch-expandable-trigger-on,
.lt-ie10 .ch-tabs .ch-tab.ch-expandable-trigger-on:hover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#fff');
}

/* Container */
.ch-tabs .ch-box-lite {
  border-radius: 0;
}

 <div id="tabs">
            <ul role="tablist" class="ch-tabs">
                <li><a href="#tab1" role="tab" aria-controls="tab1">Tab1</a></li>
                <li><a href="#tab2">Tab2</a></li>
                <li><a href="/static/ajax.html#ajax">Ajax</a></li>
            </ul>
            <div role="presentation">
                <div id="tab1" role="tabpanel">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>
                </div>
                <div id="tab2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar.</p>
                </div>
            </div>
    </div>
&#13;
&#13;
&#13;

0 个答案:

没有答案