Javascript 我想在单击每个导航元素时交换我的部分（内容1~4）。_Javascript_Html_Css

Javascript 我想在单击每个导航元素时交换我的部分（内容1~4）。

javascript html css

Javascript 我想在单击每个导航元素时交换我的部分（内容1~4）。,javascript,html,css,Javascript,Html,Css,首先，当我打开网站时，我想让主页内容处于活动状态。其他内容应该隐藏，其次每个内容都应该与导航元素链接。因此，当我单击元素时，它应该将内容与匹配的内容交换。如果我需要使用javascript，请告诉我。欢迎评论：）谢谢 @font-face{ 字体系列：font1； src:url（'font/CaviarDreams.woff'）； } #包装纸{ 保证金：0自动；背景：白色；边框：1px纯黑；最大宽度：1060px； } 标题{ 最大宽度：1060px；宽度：100%；高度：7

首先，当我打开网站时，我想让主页内容处于活动状态。其他内容应该隐藏，其次每个内容都应该与导航元素链接。因此，当我单击元素时，它应该将内容与匹配的内容交换。如果我需要使用javascript，请告诉我。欢迎评论：）谢谢

@font-face{
字体系列：font1；
src:url（'font/CaviarDreams.woff'）；
}
#包装纸{
保证金：0自动；
背景：白色；
边框：1px纯黑；
最大宽度：1060px；
}
标题{
最大宽度：1060px；
宽度：100%；
高度：76px；
排名：0；
左：0；
边框：1px纯黑；
}
#标志{
边缘顶端：37像素；
左边距：10px；
浮动：左；
宽度：160px；
高度：30px；
背景：url（logo6.png）无重复中心；
显示：块；
}
导航{
浮动：对；
利润上限：27px；
右边距：10px；
}
导航ul{
列表样式：无；
}
李国荣{
显示：内联块；
浮动：左；
字体系列：font1；
字体大小：15px；
填充：10px；
文字装饰：无；
光标：指针；
}
nav ul li:悬停{
颜色：#6F6F6F；
}
#菜单{
显示：隐藏；
宽度：40px；
高度：40px；
背景：url（menu icon.png）中心；
}
#菜单：悬停{
背景色：#CBCB；
边界半径：3px3px0；
}	
/*媒体查询*/
@介质和全部（最大宽度：640像素）{
#菜单{
显示：内联块；
}
导航ul，导航：主动ul{
显示：无；
位置：绝对位置；
填充：10px；
背景：#fff；
边框：3px实心#CBCBCB；
右：18px；
顶部：57px；
宽度：30%；
边界半径：3px 0 3px 3px；
z指数：200；
}
李国荣{
文本对齐：居中；
宽度：100%；
保证金：0自动；
}
导航：悬停{
显示：块；
}
}
#交换{
利润率：40px自动40px；
最大宽度：980px；
位置：相对位置；
填充：20px；
边框：1px纯黑；
z指数：100；
溢出：隐藏；
}
#社交网站{
文本对齐：居中；
}
#李信实{
显示：内联块；
右边距：10px；
}
#版权所有李{
字体家族：继承；
字体大小：13px；
文本对齐：居中；
列表样式：无；
}




家


轮廓


陈列室


联系


家庭内容
配置文件内容
画廊内容
联系内容




版权所有©2015 INKYU PARK。
保留所有权利

您需要为此使用某种脚本（或者仅使用4个原始html页面）

我建议使用bootstrap，如果您是javascript新手，这很简单

<div class="container">
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab">Gallery</a></li>
    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contact</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
    <div role="tabpanel" class="tab-pane" id="contact">Contact</div>
  </div>

</div>








家
轮廓
陈列室
联系

以上是从中提取的，fiddle。

是的，您需要JavaScript（其他语言可以做到，但这是我所知道的最简单的）

例如，您可以将HTML更改为（为清晰起见稍微简化）：

对于更干净的函数，您还可以使用

$（“.home”）.toggle（）等功能，它将切换状态（如果显示，它将隐藏，反之亦然）。但我现在不知道该怎么做：）你应该试着学习javascript，并问我们你遇到的问题。好的~！！：）我订了一本java脚本书。你是说CSS3不能解决我的问题？是的，你应该学习html，css，javascript。这些都是基本的。非常感谢~！！你真是太好了：）我能用bootstrap隔离分区和菜单选项卡吗？哦，这真是简单又好的JAVASCRIPT！非常感谢。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="./test.css">
    <!-- Must have this line first, to enable functions in test.js -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Here you get the hide/show functions -->
    <script type="text/javascript" src="./test.js"></script>
</head>
<body>
    <div id="wrapper">
        <header class="header-site" role="banner">
            <a href="#" id="logo"></a>
            <nav>
                <a href="#" id="menu"></a>
                <ul>
                    <li class=showhome>Home</li>
                    <li class=showProfile>Profile</li>
                    <li class=showGallery>Gallery</li>
                    <li class=showContact>Contact</li>
                </ul>
            </nav>
        </header>
        <div id="swap">
            <div id="Home_contents"    class=home    >Home contents</div>
            <div id="Profile_contents" class=Profile >Profile contents</div>
            <div id="Gallery_contents" class=Gallery >Gallery Contents</div>
            <div id="Contact_contents" class=Contact >Contact contents</div>
        </div>
    </div>
</body>
</html>

$(document).ready(function(){
    $(".showhome").click(function(){
        $(".home").show();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showProfile").click(function(){
        $(".home").hide();
        $(".Profile").show();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showGallery").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").show();
        $(".Contact").hide();
    });
    $(".showContact").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").show();
    });
    // Hide all and show home on page loading
    $(".home").show();
    $(".Profile").hide();
    $(".Gallery").hide();
    $(".Contact").hide();
});