我有一个导航栏,如下所示:

<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

07-24 09:49
查看更多