html - Making a TabNav work correctly

Question

commerce site that has a particular tab navigation code that allows users to click and view information.

The Tab Nav looks like this:

Details | Shipping | Returns | Lifestyle View

When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.

Any help would be greatly appreciated.

the page can be found at:

http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#

Answer 1

正如我在这个 JSFiddle中演示的那样，它实际上只是将一个流中元素附加到列表项上的情况。在我提供的示例中，我使用以下 jQuery 代码将段落元素 ( P) 附加到列表项元素 ( li)。

片段

$("#clickAble").click(function(e) {    
    $("#clickList").append($("<p id='appended'>Hello</p>"));
});

如您所见，他的所作所为相当明显。这创造了一个粗略的例子，但它仍然是一个有效的例子。