Question

<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>

以上是我到目前为止的代码。

现在，当点击第1页，第2页或第3页时，所需页面将显示在下方。此代码设置在页面的右侧。 <div style="float: right; width: 75%;">

在页面左侧<div style="float: left; width: 20%;">，我有一个带有几个按钮链接的手风琴。我的问题是当点击手风琴中的按钮链接1或按钮链接2时，如何从选择的不同页面切换正确的页面，保持它现在具有的相同功能。

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

有关视觉效果，请参阅此fiddle
如果你看到小提琴，那么黑盒内的链接会切换div中的页面，但我想添加另一个功能并根据用户按下按钮链接1或按钮链接2来切换黑匣子

有什么建议？谢谢！

Answer 1

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

我认为对你来说非常有用，就是研究jQuery UI标签： http://jqueryui.com/tabs/ 并将标签点击事件链接到手风琴菜单。

修改：

JSFiddle，包括jQuery UI选项卡。提供了有关如何激活手风琴菜单中单击事件的选项卡的代码。 http://jsfiddle.net/kimgysen/BcCnL/2/

$(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);
    });        
});

单个页面上的多个导航和页面

1 个答案: