[英]Modifying Jquery-ui tab layout for tab button
I'm using jquery-ui tabs to create a page with a menu. 我正在使用jquery-ui选项卡创建带有菜单的页面。 I decided to have a graphic like below for my website
我决定在我的网站上使用以下图形
But ends up to this: 但是到此为止:
As you can see I can not fulfill my wishes. 如您所见,我无法实现我的愿望。 There are something that I can not modify on jquery-ui, at least I don't know how to resolve it.
我无法在jquery-ui上进行某些修改,至少我不知道如何解决它。 Because styling applies to all materials I could not change first and last ul>li.
因为样式适用于所有材料,所以我不能最后更改ul> li。 I explicit it in below picture:
我在下图中显示了它:
I added my script to jsfiddle for showing what I have done. 我将脚本添加到jsfiddle中以显示我已完成的工作。 http://jsfiddle.net/fad6d85o/
http://jsfiddle.net/fad6d85o/
Now My two certain questions are listed below: 1- how to apply different css to first and last ul>li? 现在,下面列出了我的两个特定问题:1-如何将不同的CSS应用于第一个和最后一个ul> li? 2- How can I define for example width:25% for ul>li>a links?
2-例如,如何为ul> li> a链接定义width:25%? I want to define container width:800px and then set width: 100/n % for ul>li>a links.
我想定义容器宽度:800px,然后为ul> li> a链接设置宽度:100 / n%。
.ui-widget-content a {
color: #333333;
padding: 60px;
line-height: 4.3em;
}
I have done above changes but it's not nice when a string is long and another one is short. 我已经进行了上述更改,但是当一个字符串很长而另一个字符串很短时就不好了。 it would not be as size as each other.
它不会像彼此一样大小。
Please Check the fiddle 请检查小提琴
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
I guess this is what you are looking for as far as i understood your question. 据我所知,这就是您正在寻找的东西。 Please mark me correct if i am correct or if some more issues are there i am ready to help out.
如果我是正确的,或者如果有其他问题,请随时将我标记为正确。 Cheers......
干杯......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.