Javascript 单个页面上的多个导航和页面跨度{ 文字装饰：下划线；颜色：蓝色；光标：指针； } //显示给定页面，隐藏其余页面功能显示（elementID）{ //尝试查找请求的页面，如果未找到，则发出警报 var ele=document.getElementById（elementID）；如果（！ele）{ 警报（“无此类元素”）；返回； } //获取所有页面，循环浏览并隐藏它们 var pages=document.getElementsByClassName（'page'）；对于（变量i=0；i_Javascript_Jquery_Html_Css

Javascript 单个页面上的多个导航和页面跨度{ 文字装饰：下划线；颜色：蓝色；光标：指针； } //显示给定页面，隐藏其余页面功能显示（elementID）{ //尝试查找请求的页面，如果未找到，则发出警报 var ele=document.getElementById（elementID）；如果（！ele）{ 警报（“无此类元素”）；返回； } //获取所有页面，循环浏览并隐藏它们 var pages=document.getElementsByClassName（'page'）；对于（变量i=0；i

javascript jquery html css

Javascript 单个页面上的多个导航和页面跨度{ 文字装饰：下划线；颜色：蓝色；光标：指针； } //显示给定页面，隐藏其余页面功能显示（elementID）{ //尝试查找请求的页面，如果未找到，则发出警报 var ele=document.getElementById（elementID）；如果（！ele）{ 警报（“无此类元素”）；返回； } //获取所有页面，循环浏览并隐藏它们 var pages=document.getElementsByClassName（'page'）；对于（变量i=0；i,javascript,jquery,html,css,Javascript,Jquery,Html,Css,链接1 第二节链接2 显示页面 1. 2. 3. 第1页内容第2页内容第3页内容以上是我到目前为止掌握的代码。现在，当点击第1页、第2页或第3页时，欲望页面将出现在下面。此代码设置在页面的右侧在页面的左侧，我有一个手风琴，上面有几个按钮链接。我的问题是，当点击手风琴中的按钮链接1或按钮链接2时，我如何从不同的页面选择中切换正确的页面，保持它现在具有的相同功能因此，首先我会单击手风琴中的按钮链接1，在右侧显示所需页面，如果我想切换页面，那么我会单击手风琴中的按钮链接2，并

链接1

第二节链接2

显示页面 1. 2. 3.

第1页内容第2页内容第3页内容以上是我到目前为止掌握的代码。

现在，当点击第1页、第2页或第3页时，欲望页面将出现在下面。此代码设置在页面的右侧<代码>

在页面的左侧，我有一个手风琴，上面有几个按钮链接。我的问题是，当点击手风琴中的按钮链接1或按钮链接2时，我如何从不同的页面选择中切换正确的页面，保持它现在具有的相同功能

因此，首先我会单击手风琴中的按钮链接1，在右侧显示所需页面，如果我想切换页面，那么我会单击手风琴中的按钮链接2，并显示所需页面。

有关视觉效果，请参见此
如果您看到了小提琴，那么黑盒内的链接将在div内切换页面，但我想添加另一个函数，并根据用户按下按钮link 1或按钮link 2来切换黑盒

有什么建议吗？谢谢

我不确定我是否正确理解了这个问题

我认为对您非常有用的是查看jQuery UI选项卡：并将选项卡单击事件链接到手风琴菜单

编辑：

JSFIDLE，包括jQueryUI选项卡。提供了如何从手风琴菜单激活单击事件选项卡的代码。

例如，您是说希望按钮链接1显示第2页吗？您能制作一个JSFIDLE吗？这对我们来说更容易形象化。我创建这个是为了形象化。单击链接1或链接2时，我希望黑框根据您按下的链接进行切换。因此，如果我有5个链接，那么我将有5个页面（整个黑匣子）可以从@dangoodspeed中选择div中黑匣子切换页面内的链接，但我想添加另一个功能并切换黑匣子，这取决于用户是否按下按钮link 1或按钮link 2nice，这就是我要寻找的，我可以试着在我的小提琴中添加第二层导航，看看它是否在你提供的小提琴中起作用。KimgySn还考虑使用$（''.'Ath-Dediv'）.Load（“HTP://SyAuthURL**”）（Ajax速写）来动态加载内容到你的div中。而不是将所有子页面直接加载到主页中。

<html>
<head>
  <style type='text/css'>
    span {
      text-decoration:underline;
      color:blue;
      cursor:pointer;
    }
  </style>
  <script>
    // show the given page, hide the rest
    function show(elementID) {
        // try to find the requested page and alert if it's not found
        var ele = document.getElementById(elementID);
        if (!ele) {
            alert("no such element");
            return;
        }
        // get all pages, loop through them and hide them
        var pages = document.getElementsByClassName('page');
        for(var i = 0; i < pages.length; i++) {
            pages[i].style.display = 'none';
        }
        // then show the requested page
        ele.style.display = 'block';
    }
  </script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
  </script>
</head>
<body>
  <div style="float: left; width: 20%;">
     <div id="accordion">
        <h3>Section 1</h3>
            <div>
                <p>
                <button>Link 1</button>
                </p>
            </div>
        <h3>Section 2</h3>
            <div>
                <p>
                <button>Link 2</button>
                </p>
            </div>
     </div>
  </div>
  <div style="float: right; width: 75%;">
    <div>
       <p>
          Show page 
          <span onclick="show('Page1');">1</span>, 
          <span onclick="show('Page2');">2</span>, 
          <span onclick="show('Page3');">3</span>.
       </p>
      <div id="Page1" class="page" style="">
         Content of page 1
      </div>
      <div id="Page2" class="page" style="display:none">
         Content of page 2
      </div>
      <div id="Page3" class="page" style="display:none">
         Content of page 3
      </div>
    </div>
  </div>
</body>
</html>

$(document).ready(function() {
    //Tabs 
    $('#body_div').tabs();
    $('#newsfeed').click(function(){
        $("#body_div").tabs("option", "active", 0);
    });
    $('#myprofile_edit').click(function(){
        $("#body_div").tabs("option", "active", 1);
    });
    $('#myprofile_view').click(function(){
        $("#body_div").tabs("option", "active", 2);
    });        
});