Boostrap实现下拉框改变样式

最新推荐文章于 2024-07-06 06:47:38 发布

转载最新推荐文章于 2024-07-06 06:47:38 发布 · 2.6k 阅读

学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文展示了一个使用HTML和jQuery实现的主题下拉菜单交互示例。该示例包括多个技术选项，如Java、数据挖掘等，并提供了一段可运行的代码以演示如何通过点击菜单项来更新显示的主题。

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>

</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){

$(".dropdown a").click(function(){
$("#dropdownMenu1").html(this.innerHTML+'<span class="caret"></span>')
});

})

</script>
</html>