Question

我是jquery和Javascript的新手，我仍在学习，而且我正在努力。

以下问题对于体验人来说可能很简单。

请帮助我

其实我正在尝试一个页面组合。

1）我的页面中有两个div列和＆amp;对 2）在左边我有导航，有三个链接＆amp;对，我有内容 3）默认情况下，我的第一个内容链接将显示为：block;但其余的将显示禁用。一旦我点击第二个链接，内容的第一页应该隐藏，第二个内容应该显示为第三个相同的东西。

现在我的代码是

<div id="navi">
<ul>
      <li><a href="#first">First link</a></li>
      <li><a href="#second">Second link</a></li>
      <li><a href="#third">Third link</a></li>
</ul>
</div>

<div id="content1" style="display:block;">
<a href="#">#first</a>
    Check first content
</div>
<div id="content2" style="display:none;">
<a href="#">#Second</a>
    Check first content
</div>
<div id="content3" style="display:none;">
<a href="#">#third</a>
    Check first content
</div>

请帮我怎么做

Answer 1

jquery ui tabs 符合此条件请尝试

<强>更新

对于Verticle标签，请参阅 demo

Answer 2

使用jquery这很简单，这是最简单的解决方案

$('#navi ul li a').click(function(){
    var href = $(this).attr('href');
    if(href === '#first'){
        $('#content1').show();
        $('#content2').hide();
        $('#content3').hide();
    }
    if(href === '#second'){
        $('#content1').hide();
        $('#content2').show();
        $('#content3').hide();
    }
    if(href === '#third'){
        $('#content1').hide();
        $('#content2').hide();
        $('#content3').show();
    }
});

你可以开发一个函数来简化过程以匹配任意数量的元素。

这里是jsfiddle上的demo

Answer 3

只需在两个链接及其对应的div元素中添加一个公共类，并使用jquery来操作它，

HTML

<div id="navi">
<ul>
      <li><a class='link1' href="#first">First link</a></li>
      <li><a class='link2' href="#second">Second link</a></li>
      <li><a class='link3' href="#third">Third link</a></li>
</ul>
</div>

<div class='link1' id="content1" style="display:block;">
    <a href="#">#first</a>
    Check first content
</div>

<div class='link2' id="content2" style="display:none;">
    <a href="#">#Second</a>
    Check first content
</div>

<div class='link3' id="content3" style="display:none;">
    <a href="#">#third</a>
    Check first content
</div>

JQUERY

$("#navi a").click(function(){

    $('div[id^="content"]').hide();

    $("div" + "." + $(this).attr('class') ).show();
});

LIVE - DEMO

Answer 4

这个小提琴需要一些补充和修改，但它会完成这个技巧，你不需要改变JavaScript来添加更多标签。

http://jsfiddle.net/LY6sC/

HTML

 <div id="navi">
    <ul>
        <li class="content-tab"><a href="#first">First link</a></li>
        <li class="content-tab"><a href="#second">Second link</a></li>
        <li class="content-tab"> <a href="#third">Third link</a></li>
    </ul>
</div>
<div id="first" class="content-pane">
<a href="#">#first</a>
Check first content</div>
<div id="second" class="content-pane">
<a href="#">#Second</a>
Check second content</div>
<div id="third" class="content-pane">
<a href="#">#third</a>
Check third content</div>

的JavaScript

$(function() {
    var hidePaneCssClass ='content-pane-hidden';

    $('.content-tab a').on('click',function(evt) {
        $('.content-pane').addClass(hidePaneCssClass);
        var target = $(evt.currentTarget).attr('href');
        $(target).removeClass(hidePaneCssClass);
    });

    $('.content-tab:first-child a').trigger('click');

});

CSS

.content-pane-hidden {
    display:none;
}

注意：它是渐进式增强功能，因此如果某人没有JavaScript或脚本无法加载，则会显示所有标签。

Answer 5

//因为你是jquery和javascript的新手首先要确保你的元素有属性，即ids / classes，只是为了让你的生活更轻松...... //没有测试代码，应该工作

function checkContent(element){
    id =$(element).attr('id');
    if(id =="first"){ 
            $("div[id^='content']").hide()
            $("#content1").show();
    }               
    if(id =="second"){
            $("div[id^='content']").hide()
            $("#content2").show();
    }
    if(id =="third"){
            $("div[id^='content']").hide()
            $("#content3").show();
    }
}
$("#first, #second, #third").click(function(){
        checkContent(this);
});

muiltipe次使用jquery显示或隐藏

5 个答案:

HTML

JQUERY

LIVE - DEMO