我对所有 Java/Jquery 都很陌生,但是对于我的网站,我想使用它。
有这个问题;我正在尝试制作一些精美的标签式导航。关键是,如果我在 HTML5 中使用“onclick”,它不会做不止一项活动。
我有的:
HTML/JAVA/CSS:
<!-- this are the buttons to press for showing content. -->
<div id="MENU1" class="active" onclick="showHide('1');"><center>1</center></div>
<div id="MENU2" class="inactive" onclick="showHide('2');"><center>2</center></div>
<div id="MENU3" class="inactive" onclick="showHide('3');"><center>3</center></div>
<div id="MENU4" class="inactive" onclick="showHide('4');"><center>4</center></div>
<div id="CONTAINER">
<!-- here should appear text -->
<div id="CONTENT1">here somehow wil appear content 1</div>
<div id="CONTENT2">here somehow wil appear content 2</div>
<div id="CONTENT3">here somehow wil appear content 3</div>
<div id="CONTENT4">here somehow wil appear content 4</div>
</div>
<script type="text/javascript">
function showHide(divId){
var theDiv = document.getElementById(divId);
if(theDiv.style.display=="none"){
theDiv.style.display="block";
}else{
theDiv.style.display="none";
}
}
</script>
<!-- the style of the buttons have to change from .inactive to .active -->
<style>
.active{
color:#FF6a00;
background-image:url(images/blackbck.png);
background-repeat:round;
background-size:cover;
}
.inactive{
color:black;
background-image:url(images/orangebck.png);
background-repeat:round;
background-size:cover;
}
</style>
有人可以帮我解决这个问题吗?
概括:
- 按钮应该改变样式。
- 内容应通过单击按钮出现。
- 通过单击其他按钮,应隐藏旧内容。