我有 12 个链接,每个链接都会更改显示在右侧的 div。我觉得我在使用多次点击和隐藏语句时效率很低。
$(document).ready(function() {
/*PSEUDO CODE*/
/*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/
});
.box {
border: 0.1em solid #000;
margin: 1em;
width: 70%;
}
.box a {
padding: 2.5em;
}
<div class="box">
<a href="#" id="link-one">Hello</a>
<a href="#" id="link-two">Hello</a>
<a href="#" id="link-three">Hello</a>
</div>
<div class="box">
<a href="#" id="link-four">Hello</a>
<a href="#" id="link-five">Hello</a>
<a href="#" id="link-six">Hello</a>
</div>
<div class="box">
<a href="#" id="link-seven">Hello</a>
<a href="#" id="link-eight">Hello</a>
<a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
<a href="#" id="link-ten">Hello</a>
<a href="#" id="link-eleven">Hello</a>
<a href="#" id="link-twelve">Hello</a>
</div>
<div class="dynamic-div">
<div class="link-box" id="link-one-box">
</div>
<div class="link-box" id="link-two-box">
</div>
<div class="link-box" id="link-three-box">
</div>
<div class="link-box" id="link-four-box">
</div>
<div class="link-box" id="link-five-box">
</div>
<div class="link-box" id="link-six-box">
</div>
<div class="link-box" id="link-seven-box">
</div>
<div class="link-box" id="link-eight-box">
</div>
<div class="link-box" id="link-nine-box">
</div>
<div class="link-box" id="link-ten-box">
</div>
<div class="link-box" id="link-eleven-box">
</div>
<div class="link-box" id="link-twelve-box">
</div>
</div>
我当前的 JavaScript 最初隐藏了每个 div,然后当单击一个链接时,它会手动告诉所有其他 div 关闭但保持被单击的那个打开。这看起来效率很低,如果有人能给我一些关于如何让它不那么冗长的指示,我将不胜感激。
最佳答案
是这样的吗?
$("a[id^=link]").click(function(){
$(".link-box").hide();
$("#"+this.id+"-box").show();
})
检查是否有
<a>
id 以link
开头被点击隐藏所有框
打开框,id 为点击链接的 id +
-box
演示:
$("a[id^=link]").click(function(){
$(".link-box").hide();
$("#"+this.id+"-box").show();
})
.link-box{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#" id="link-one">Hello</a>
<a href="#" id="link-two">Hello</a>
<a href="#" id="link-three">Hello</a>
</div>
<div class="box">
<a href="#" id="link-four">Hello</a>
<a href="#" id="link-five">Hello</a>
<a href="#" id="link-six">Hello</a>
</div>
<div class="box">
<a href="#" id="link-seven">Hello</a>
<a href="#" id="link-eight">Hello</a>
<a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
<a href="#" id="link-ten">Hello</a>
<a href="#" id="link-eleven">Hello</a>
<a href="#" id="link-twelve">Hello</a>
</div>
<div class="dynamic-div">
<div class="link-box" id="link-one-box">1
</div>
<div class="link-box" id="link-two-box">2
</div>
<div class="link-box" id="link-three-box">3
</div>
<div class="link-box" id="link-four-box">4
</div>
<div class="link-box" id="link-five-box">5
</div>
<div class="link-box" id="link-six-box">6
</div>
<div class="link-box" id="link-seven-box">7
</div>
<div class="link-box" id="link-eight-box">8
</div>
<div class="link-box" id="link-nine-box">9
</div>
<div class="link-box" id="link-ten-box">10
</div>
<div class="link-box" id="link-eleven-box">11
</div>
<div class="link-box" id="link-twelve-box">12
</div>
</div>
关于javascript - 编写由许多链接和打开/关闭 div 组成的 jQuery 代码的更好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29303535/