Javascript 如何使导航栏根据单击的按钮显示文本
我被要求尝试复制一个内置于.php中的页面(他们拥有该页面),并将其重新创建为一个可编辑的.html和.css页面,以便在具体应用中使用,但我在让导航栏正常运行方面面临一些问题 它只应通过将内容显示:函数从“无”更改为“块”来显示相应选项卡下的内容,反之亦然,同时更改其类。我有90%的把握,仅仅用css和html是不可能解决这个问题的,那么有人对我如何实现这个问题有什么建议吗 CSS、HTML都在处理中Javascript 如何使导航栏根据单击的按钮显示文本,javascript,html,css,button,navbar,Javascript,Html,Css,Button,Navbar,我被要求尝试复制一个内置于.php中的页面(他们拥有该页面),并将其重新创建为一个可编辑的.html和.css页面,以便在具体应用中使用,但我在让导航栏正常运行方面面临一些问题 它只应通过将内容显示:函数从“无”更改为“块”来显示相应选项卡下的内容,反之亦然,同时更改其类。我有90%的把握,仅仅用css和html是不可能解决这个问题的,那么有人对我如何实现这个问题有什么建议吗 CSS、HTML都在处理中 可以使用CSS3,一个快速的谷歌搜索向我展示,其中包含一些演示(查看演示页面的链接) 如
可以使用CSS3,一个快速的谷歌搜索向我展示,其中包含一些演示(查看演示页面的链接)
如果您需要向后浏览器支持,那么可以使用jQuery或提供此功能的javascript库。我过去在这方面很幸运。你完全可以用HTML和CSS来实现这一点……使用标签来检查备用的无线电输入元素,然后使用其选中状态来确定相邻的div元素的显示 有关单击时突出显示选项卡的信息,请参见下面的第二个示例… HTML
通过更多的HTML和CSS技巧,您可以扩展它,不仅在单击时显示内容,还可以突出显示当前选定的选项卡 HTML
如果您可以在项目中使用JavaScript并导入jQuery和jQuery UI,那么一个简单的方法就是使用jQuery UI 用小提琴演示: jQueryUI上的演示
你有我们能看到的JavaScript吗?对于方向,您需要向每个选项卡添加一个click listener,以获取使用event.getSource()单击的按钮。您想做什么?当点击标签时隐藏或显示内容?完美、直截了当的回答,这正是我所希望的解决方案。谢谢一个简单的问题,我将如何更改选中的无线电输入元素的样式?这是一个很好的解决方案,它确实有效,但理想情况下,我希望尽可能避免使用JavaScript,因为将它添加到他们正在使用的cms中会很痛苦。
.tabs #tab-container-1-nav li.activeli a {
background: #1f5497;
color: #fff;
}
.tabs #tab-container-1-nav li a {
padding: 10px 15px;
background: #f2f2f2;
color: #4D4D4D;
text-decoration: none;
font-weight: bold;
font-size: 14px;
text-align: center;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tabs #tab-container-1-nav li {
float: left;
display: inline;
margin-right: 8px;
}
.tabs ul {
list-style: none;
}
.main ul {
list-style: inside;
}
.main ul li {
font-size: 13px;
margin: 5px 0;
color: #0d3161;
}
div#tab-container-1 {
margin-top: 57px;
<label for='tab1Content'>Tab 1</label>
<label for='tab2Content'>Tab 2</label>
<label for='tab3Content'>Tab 3</label>
<br />
<br />
<input type='radio' name='content' id='tab1Content' checked='true' />
<div>Tab 1 content</div>
<input type='radio' name='content' id='tab2Content' />
<div>Tab 2 content</div>
<input type='radio' name='content' id='tab3Content' />
<div>Tab 3 content</div>
label {
padding: 10px 15px;
background: #f2f2f2;
color: #4D4D4D;
text-decoration: none;
font-weight: bold;
font-size: 14px;
text-align: center;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
input[name=content] {
display:none;
}
input[name=content] +div {
display:none;
}
input[name=content]:checked +div {
display:block;
}
<div id='wrapper'>
<div>
<input type='radio' name='content' id='tab1Content' checked='true' />
<label for='tab1Content'>Tab 1</label>
<div>Tab 1 content</div>
</div>
<div>
<input type='radio' name='content' id='tab2Content' />
<label for='tab2Content'>Tab 2</label>
<div>Tab 2 content</div>
</div>
<div>
<input type='radio' name='content' id='tab3Content' />
<label for='tab3Content'>Tab 3</label>
<div>Tab 3 content</div>
</div>
</div>
label {
padding: 10px 15px;
background: #f2f2f2;
color: #4D4D4D;
text-decoration: none;
font-weight: bold;
font-size: 14px;
text-align: center;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
#wrapper {
position:relative;
}
#wrapper > div {
float:left;
margin-right:10px;
}
input[name=content] {
display:none;
}
input[name=content]~div {
display:none;
overflow:hidden;
position:absolute;
top:40px;
left:0;
}
input[name=content]:checked~div {
display:block;
}
input[name=content]:checked~label {
background:lightblue;
}
$( "#tabs" ).tabs();