Question

我想制作一个水平标签菜单栏，例如。包装介绍|包装说明|包装成本

因此，当我点击一个标签时，该特定内容将从侧面滑入;默认情况下，“包介绍”将首先显示。

那么请你建议我实现这一目标的代码。优先使用jQuery。我已经完成了这个代码，这是一个蹩脚而且不费吹灰之力的代码。我正在寻找一种更好的方法来实现这一目标。最好是jQuery，但不是jQuery插件/项目。只有3-4行jQuery代码可以帮助我进行选择和动画。

    <html><head>
</head>
<style>
.tabs_bar {
    font-family: "Segoe UI Light", "Open Sans Light", "Myriad Pro Light", "Roboto Lt";
    text-align: center;
    width: 40%;
    margin: 10px auto 0px;
}
.tabs_list {
    overflow: hidden;
}
.tabs_list>li {
    display: inline-block;
}
.tabs_list>li a {
    padding: 0px 5px;
    font-size: 30px;
    color: #CCC;
}
.tabs_list>li a:hover {
    color: #333;
}
.active {}
.tabs_list>li a.active {
    color: #F00;
    font-size: 32px;
}
.tab_body {
    width: 100%;
    margin: 10px auto 0px;
}
.box {
    background: #FFF;
    display: none;
}
.box:target {
    display: block;
}
.tab_body_list {
    overflow: hidden;
}
.tab_body_list>li {
    display: inline-block;
}
</style>
<body>


<!-- tab bar -->
    <div class="tabs_bar">
    <ul class="tabs_list">
        <li><a href="#hotels" class="active">hotels</a></li>
        <li><a href="#meals">meals</a></li>
    </ul>
    <!--end tab bar --></div>

    <!-- tab body -->
    <div class="tab_body">
    <ul class="tab_body_list">
        <li><div id="hotels" class="box">dflkjkjdjkdhmkjnhhgunhusjriondiuhuehgds<br>gheruhiuhriuewhiuheiugiueji</div></li>
        <li><div id="meals" class="box">dklsjhjkdhbkdhkhkdhs sighshgsiuhgsuhgj sushgus<br>skuhushushu</div></li>
    </ul>
    <!-- end tab body --></div>

    kdsjnhfvmnhj hndkuhdvhjdnhcjhdbkldfbfklnhklnhklbnklesbeklbwklbnkhwlnhklwrhibgwhlkgwkllkbngklrwnhbkwhklwnhkl

</body>
</html>

Answer 1

我不太确定我是否明白你的要求，我没有玩过你的CSS，但你可以做到这一点以达到预期的效果，但我认为这就是你要找的。 / p>

FIDDLE

$('#hotel').click(function(){
    $('#hotels').animate({width:'toggle'},1000);
    $('#hotels').fadeIn();
    $('#meals').fadeOut();
});

$('#Meal').click(function(){
    $('#meals').animate({width:'toggle'},1000);
    $('#meals').fadeIn();
    $('#hotels').fadeOut();
});

我希望你找到你想要的东西。

修改结果我有更多的时间，所以我把小提琴修好了一点，并删除了一行Jquery。

干杯！

Answer 2

试试这个

$(document).ready(function(){
    $('.tab_body_list li:first-child .box').css('display','block') ;
    $('.tabs_list li').click(function(){
     var ind =  $(this).index();
        $('.tab_body_list li .box').css('display','none') ;
    $('.tab_body_list').children('li').eq(ind).children('.box').css('display','block') ;
    });
});

DEMO

Answer 3

您可以使用jquery选项卡。请参阅以下链接。源代码和演示就在那里

http://jqueryui.com/tabs/

如何创建水平标签菜单？

3 个答案: