Question

我的导航栏看起来非常多，并且按照我想要的方式工作，但是我希望链接更改和/或加载新的div显示在页面上或可能是模态。我认为改变按钮将是最简单的方法。但理想情况下，我希望按钮看起来与链接一样，以及鼠标悬停颜色。

我的导航栏代码是

<nav class = 'navbar navbar-default'>
 <div class='container'>
     <div class = 'navbar-header'>
<button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'>
<span class = 'sr-only'>Toggle navigation</span>
<span class='icon-bar top-bar'></span>
<span class='icon-bar middle-bar'></span>
<span class='icon-bar bottom-bar'></span></button>
<a class = 'navbar-brand wow zoomIn' href = '#'><img class='img-responsive2'       
           src='http://www.cheekytransport.co.uk/images/new.png' alt='logo' height='52'></a></div>
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
        <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
        <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
</div>
 </div>
</nav>

导航栏css：

 .navbar-default {   
    padding-left:10px;
    padding-right:10px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #00a3fe;
    font-size: 14pt;font-weight: 400;}


.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.nav.navbar-nav.navbar-right li a {
    color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #49bdfe;
    color: #FFFFFF;
}

.navbar-toggle, .icon-bar {
    border:1px solid white;
    background-color:white;
}

Answer 1

你的意思是替换＆＃39;＆＃39;用＆＃39;＆＃39;标记标签？如果你这样做，只需复制CSS ..你可以这样轻松地做到这一点：

.nav.navbar-nav.navbar-right li a,
.nav.navbar-nav.navbar-right li button {

要记住一件事：按钮有一些不同的css属性，例如＆＃39; outline＆＃39;。不要忘记在你的CSS上与这些属性相关联。

将导航链接更改为按钮，使其与打开相同，并加载外部div

1 个答案: