在 html 或 javascript 中使用 Li 更改 Div

Question

我想一次显示一个 div 并隐藏另一个。 需要类似的效果：http://jsfiddle.net/cqDES/1552/

 <ul class="nav-sidebar"> <li><a href="#">elem1</a></li> <li> <a href="#">elem2</a></li> <li> <a href="#">elem3</a></li> </ul> <div id="div1">this is div 1</div> <div id="div2">this is div 2</div> <div id="div3">this is div 3</div>

Answer 1

如果您不想要滑动效果，请使用 show()/hide()

 $(() => { $('div:not(#div0)').hide(); $('.nav-sidebar li').click(function () { var index = $(this).index() + 1; $(`div:not(#div${index})`).hide(); $(`#div${index}`).show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav-sidebar"> <li><a href="#">elem1</a></li> <li> <a href="#">elem2</a></li> <li> <a href="#">elem3</a></li> </ul> <div id="div1">this is div 1</div> <div id="div2">this is div 2</div> <div id="div3">this is div 3</div>

Answer 2

我想这就是你所要求的。

JSFiddle

 $(function() { var panels = $('div').hide(); var tabs = $('.nav-sidebar li'); tabs.click(function(orgEvent) { let clickedTabIndex = tabs.index(orgEvent.currentTarget); panels.each((index, panel)=>{ $(panel)[index === clickedTabIndex? "slideDown": "slideUp"](); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav-sidebar"> <li> <a href="#">elem1</a></li> <li> <a href="#">elem2</a></li> <li> <a href="#">elem3</a></li> </ul> <div id="div1">this is div 1</div> <div id="div2">this is div 2</div> <div id="div3">this is div 3</div>

Answer 3

您可以使用show()/hide()函数：

 $(function() { $('.nav-sidebar li').click(function() { var index = $(this).index() + 1; $('div:not(#div' + index + ')').hide(); $('#div' + index).show(); }); });

 div[id^='div'] { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav-sidebar"> <li><a href="#">elem1</a></li> <li> <a href="#">elem2</a></li> <li> <a href="#">elem3</a></li> </ul> <div id="div1">this is div 1</div> <div id="div2">this is div 2</div> <div id="div3">this is div 3</div>

显示 function 文档隐藏 function 文档