我有一个导航栏,如下所示:
<div data-role="navbar" class="custom-navbar" id="custom">
<ul>
<li onclick="product()"><a>Product Catalog<span></span></a></li>
<li onclick="item()"><a>Itemized Status<span></span> Check</a></li>
<li onclick="perish()"><a>Perishability Alerts<span></span></a></li>
<li onclick="stock()"><a>OSA Alerts<span></span></a></li>
</ul>
</div>
这是我的导航栏代码,而我的css是
.custom-navbar ul li a {
background: #00a99d; Old browsers
background: linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important;
background: -moz-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; FF3.6+
background: -webkit-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; Chrome10+,Safari5.1+
background: -o-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; Opera 11.10+
background: -ms-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; IE10+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a99d', endColorstr='#00a99d',GradientType=0 ); IE6-9
font-size: 16px;
font-family: Proxima Nova Bold;
color: white;
text-decoration:none;
}
.custom-navbar ul li a.ui-btn-active {
background: linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important;
background: #67497a; Old browsers
background: linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; FF3.6+
background: -webkit-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; Chrome10+,Safari5.1+
background: -o-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; Opera 11.10+
background: -ms-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; IE10+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00897f', endColorstr='#00897f',GradientType=0 ); IE6-9
font-size: 16px;
font-family: Proxima Nova Bold;
color: white;
text-decoration:none;
}
#custom a.clicked {
background-color: #red;
}
#custom ul {
text-align: center;
}
#custom ul li {
display: inline-block;
}
#custom ul a {
color: #fff;
padding: 5px;
background-color: #00a99d;
}
#custom ul a.clicked span {
left: 50%;
bottom: 2px;
display: block;
width: 0px;
height: 1px;
margin-left: -35px;
padding: 22px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid #fff;
}
js文件是
$(document).ready(function(){
$('#custom ul li a').on('click', function () {
$('#custom ul li a ').removeClass('clicked');
$(this).addClass('clicked');
});
});
我想要这样的东西,如图所示。单击导航栏中的项目时,我想添加一个工具提示。
与这里的代码我越来越像这样
谁能告诉我该怎么做
问候,
VHC
最佳答案
这是我的解决方案:
HTML:
<div id="navHeader">
<ul id="nav">
<li id="catalog"><a href="javascript:void(0)">Product Catalog<span>tooltip</span></a></li>
<li id="item" onclick="item()"><a href="javascript:void(0)">Itemized Status Check<span>tooltip</span></a></li>
<li id="perishable" onclick="perishable()"><a href="javascript:void(0)">Perishability Alerts<span>tooltip</span></a></li>
<li id="stock" onclick="stock()"><a href="javascript:void(0)">OSA Alerts<span>tooltip</span></a></li>
</ul>
</div>
CSS:
a { position: relative; }
a span { display: none; }
a.clicked span {
top: 0;
right: -60px;
display: block;
width: 50px;
height: 20px;
position: absolute;
border: 1px solid #000;
}
jQuery的:
$('#nav a').on('click', function () {
$('#nav a').removeClass('clicked');
$(this).addClass('clicked');
});
Example 1
编辑:
span
现在看起来像这样:a.clicked span {
left: 50%;
bottom: 0px;
display: block;
width: 0px;
height: 0px;
margin-left: -4px; /* equal with border-left */
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid #fff;
}
Example 2