Jquery 将引导活动导航选项卡边框底部形状更改为实心下划线
正在尝试将导航框底部的引导活动选项卡更改为矩形。端点是弯曲的,无法将其更改为实心下划线 参考这个链接:Bootstrap导航丸-JSFiddle-我不知道如何把JSFiddle链接放在这里。安维亚斯。下面是代码。请帮忙。jquery 2.X以上版本使用。无法正确解析jsfiddle.net链接插入Jquery 将引导活动导航选项卡边框底部形状更改为实心下划线,jquery,twitter-bootstrap,css,twitter-bootstrap-3,Jquery,Twitter Bootstrap,Css,Twitter Bootstrap 3,正在尝试将导航框底部的引导活动选项卡更改为矩形。端点是弯曲的,无法将其更改为实心下划线 参考这个链接:Bootstrap导航丸-JSFiddle-我不知道如何把JSFiddle链接放在这里。安维亚斯。下面是代码。请帮忙。jquery 2.X以上版本使用。无法正确解析jsfiddle.net链接插入 $(document).ready(function () {console.log("highlight.js file executed..."); $('ul.nav > li
$(document).ready(function () {console.log("highlight.js file executed...");
$('ul.nav > li > a').click(function (e) { e.preventDefault(); $('.initial-active').removeClass('initial-active');
$('ul.nav > li > a').removeClass('active');
$(this).addClass('active');
});
});
<h2 class="text-center">Bootstrap Navpills </h2><br /><ul class="nav nav-pills text-center nav-justified ulthis">
<li class="initial-active" role="apisolution">
<a data-toggle="pill" href="#pricequoteapi">
<img alt="Price Quote API" src="http://browseideas.com/wp-content/uploads/2012/02/random-mood-photography-20-575x378.png" width="70" height="81" /> <br />
<div>PQ</div>
</a>
</li>
<li role="apisolution">
<a data-toggle="pill" href="#claimadjustapi">
<img alt="Claim Adjust API" src="https://img00.deviantart.net/08d8/i/2011/040/4/7/random_photography____by_doineedtoknow-d396v4j.jpg" width="70" height="81" /> <br />
<div>CA</div>
</a>
</li>
<li role="apisolution">
<a data-toggle="pill" href="#druglistapi">
<img alt="Drug List API" src="http://www.samhorine.com/imagesrandom/random8.jpg" width="70" height="81" /> <br />
<div>DL</div>
</a>
</li>
<li role="apisolution">
<a data-toggle="pill" href="#medpricingapi">
<img alt="Med Pricing API" src="https://c1.staticflickr.com/4/3864/14258413420_5717547046_z.jpg" width="70" height="81" /> <br />
<div>MP</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="pricequoteapi">
<div>
<h3>PQ</h3>
<p>PQ section.</p>
</div>
</div>
<div class="tab-pane fade" id="claimadjustapi">
<div> <h3>CA</h3>
<p>CA section</p>
</div>
</div>
<div class="tab-pane fade" id="druglistapi"> <div> <h3>DL</h3>
<p>DL section</p> </div> </div> <div class="tab-pane fade" id="medpricingapi"> <div>
<h3>MP</h3> <p>MP section</p> </div> </div></div>
.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{ color:black; background-color:white;}.initial-active{ border-bottom: 10px solid #5bc0eb;}.nav > li > a.active { border-bottom: 10px solid #5bc0eb;}.ulthis { border-bottom: 2px solid #FF5FFF;}
$(document.ready)(函数(){console.log(“highlight.js文件已执行…”);
$('ul.nav>li>a')。单击(函数(e){e.preventDefault();$('initial-active')。removeClass('initial-active');
$('ul.nav>li>a').removeClass('active');
$(this.addClass('active');
});
});
引导导航丸
-
-
-
PQ
PQ部分。
加利福尼亚州
CA部分
DL
DL部分
MPMP部分
.nav pills>li.active>a.nav pills>li.active>a:focus.nav pills>li.active>a:hover{颜色:黑色;背景色:白色;}.initial active{border bottom:10px solid}.nav>li>a.active{border bottom:10px solid}
图像:预期为一个-活动导航标签带实线下划线
这就是我试图解决的问题。观察主动导航丸的较圆边缘。想把它改成上面所说的那样吗
请参考上面JSFIDLE链接中的代码。请帮忙。谢谢 试试这个:
.nav > li > a.active { border-bottom: 10px solid #5bc0eb; border-radius: none}
看起来它可能有一个预定义的边界半径,用这个半径它会被重置为0半径。我在几分钟前就搞定了。但是谢谢你的帮助!这解决了我的问题:)@Vivek22如果我能帮忙,我会很高兴。