0 
<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 并显示所需的页面。

为了视觉，请看这个小提琴
如果你看到了小提琴，那么黑框内的链接会在 div 内切换页面，但我想添加另一个功能并根据用户按下按钮链接 1 或按钮来切换黑框链接 2

有什么建议吗？谢谢！

4

1 回答 1

0

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

我认为对您非常有用的是查看 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);
    });        
});
于 2013-10-15T08:44:50.850 回答