Question

尽我所能来解决这个问题，但是无法找到解决方案及其凌晨3点，你们真棒，而且我知道你们中的一个拿着钥匙！

我想要一个带左边按钮的菜单，在屏幕中央显示内容，第一个按钮必须在加载时显示其内容并被“选中”

HTML

<div class="content-slide-menu">
<ul class="menu">
   <li id="link1"><a href="#null" data-page="page1">blah blah</a></li>
   <li id="link2"><a href="#null" data-page="page2">twit twoo</a></li>
</ul>
</div>
<div class="content-slide">
<div id="page1" class="content">
    <h3>blah blah</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a,   
 bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat   
 blandit,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
<div id="page2" class="content">
   <h3>twit twoo</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, 
 bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat 
 blandit,</p>
    <div class="dots"><span>...</span>

    </div>
</div>

CSS

.content-slide-menu {
    float:left;
    width:220px;
    padding:0 10px;
}
.content-slide-menu li {
    list-style-type:none;
}
.content-slide-menu a {
    text-decoration:none;
    color:#2b2b2b;
    font-size:135%;
}
.content-slide-menu a:hover {
    color:#3ca3c5;
}
.content-slide {
    float:left;
    width:440px;
    margin-top:65px;
}
.content-slide .content {
    display:none;
}
.content-slide .content h3 {
    font-size: 150%;
    font-weight: bold;
}
.content-slide .content p {
    margin:5px 0;
    font-size:110%;
}
.dots {
    font-size:350%;
    font-weight:bold;
}
.active {
    color:#3ca3c5!important;
}

jquery

$(document).ready(function () {
    var curPage = "";
    $(".menu a").click(function () {
        if (curPage.length) {
            $("#" + curPage).hide();
        }
        curPage = $(this).data("page");
        $("#" + curPage).show();
    })

    $('.menu a').click(function () {
        $('.menu a').removeClass("active");
        $(this).addClass('active');
    });
});

fiddle

Answer 1

html更改......

<ul class="menu">
    <li id="link1"><a href="#null" data-page="page1" class="active">blah blah</a>

    </li>
    <li id="link2"><a href="#null" data-page="page2">twit twoo</a>

    </li>
</ul>

jquery改变......

$(document).ready(function () {
    var curPage = "";
    $(".menu a").click(function () {
        if (curPage.length) {
            $("#" + curPage).hide();
        }
        curPage = $(this).data("page");
        $("#" + curPage).show();
    }).filter('.active').click();

    $('.menu a').click(function () {
        $('.menu a').removeClass("active");
        $(this).addClass('active');
    });
});

Answer 2

尝试

$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this), $slider = $this.closest('.content-slide-menu');
        $slider.next().children('.content').hide();
        $("#" + $this.data("page")).show();
        $slider.find('a.active').removeClass("active");
        $this.addClass('active');
    });
    $('.content-slide-menu li:first-child a').click()
});

演示：Fiddle

jquery show，hide - 首先显示并拥有一个活动的选择器

2 个答案: