我坚持使用菜单,我很乐意添加到我的网站。 我已将我的工作分工:
所以我上面有一个像这样的菜单。 当我点击一个部分时,让我们说"商业"我希望所有其他人都能展示:无。
看看这个FIDDLE:http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function(){
$("#commercial").click(function(){
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});
非常感谢任何帮助。 馈。
答案 0 :(得分:2)
您需要siblings()宽度jquery
描述:获取匹配元素集中每个元素的兄弟元素,可选择通过选择器进行过滤。
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial"><a href="#">Commercial</a></div>
<div id="fashion"><a href="#">Fashion</a></div>
<div id="music"><a href="#">Music</a></div>
<div id="portrait"><a href="#">Portrait</a></div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
但是更好的方法是使用data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div>
<div data-tab="portrait"><a href="#">Portrait</a></div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN 最好使用纯javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div>
<div data-tab="portrait"><a href="#">Portrait</a></div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
答案 1 :(得分:1)
HTML:
<div id="commercial" class="menuItem"><a href="#">Commercial</a></div>
<div id="fashion" class="menuItem"><a href="#">Fashion</a></div>
<div id="music" class="menuItem"><a href="#">Music</a></div>
<div id="portrait" class="menuItem"><a href="#">Portrait</a></div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript的:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
答案 2 :(得分:1)
Have a look at this fiddle, think it's what you want
基本上你可以使用.toggle()来遍历和显示/隐藏它是否是你要显示的那个。
$(function(){
// find all the links that you can click
$("div.clickable a").click(
function(e){
// when they're clicked, find the identifier of the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according to whether it's the tab you want
$("div.section").each(function(index, div){
$(div).toggle($(div).hasClass(clickedId));
});
});
});
HTML:
<div id="commercial" class="clickable"><a href="#">Commercial</a></div>
<div id="fashion" class="clickable"><a href="#">Fashion</a></div>
<div id="music" class="clickable"><a href="#">Music</a></div>
<div id="portrait" class="clickable"><a href="#">Portrait</a></div><br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
已修改为在this fiddle
中添加“全部”链接$("div.clickable a").click(
function(e){
// when they're clicked, find the identifier of the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according to whether it's the tab you want
$("div.section").each(function(index, div){
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
将此内容添加到可点击的div列表中后:
<div id="ALL" class="clickable"><a href="#">ALL</a></div>
答案 3 :(得分:0)
你可以更容易:
<div class="link" id="commercial"><a href="#">Commercial</a></div>
<div class="link" id="fashion"><a href="#">Fashion</a></div>
<div class="link" id="music"><a href="#">Music</a></div>
<div class="link" id="portrait"><a href="#">Portrait</a></div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>