Accordion Jquery - 切换按钮实现答案

【问题标题】：Accordian Jquery - Toggle Button implementationAccordion Jquery - 切换按钮实现
【发布时间】：2014-05-14 08:21:03
【问题描述】：

我有一个在 jquery 网站上构建的 jquery 手风琴菜单项目。

在手风琴菜单中，我有一个 iframe。我想在此菜单中的 2 个 iframe 之间切换。因此，在首次加载时显示的 iframe 之外。我想显示一个切换按钮，单击它会将我带到一个新的 iframe。再次单击此 iframe 时，它必须将我带回默认页面。

请在此链接中找到该项目：https://app.box.com/s/vmkhhxcq4gfji2hxwtwx

请帮助我在 iframe 下方构建一个工作切换按钮，以在默认 src 和新 src 之间切换。

HTML ->

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <link href="css/BlueTheme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui-1.10.4.custom.js"></script>
    <script>
               $(function() {

            $( "#accordion" ).accordion();

            $( "#dialog-link, #icons li" ).hover(
            function() {
                $( this ).addClass( "ui-state-hover" );
            },
            function() {
                $( this ).removeClass( "ui-state-hover" );
            }
        );
        });
    </script>
    <style>
        body{
            font: 62.5% "Trebuchet MS", sans-serif;
            margin: 0px;
        }
        .demoHeaders {
            margin-top: 2em;
        }
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #icons {
            margin: 0;
            padding: 0;
        }
        #icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        #icons span.ui-icon {
            float: left;
            margin: 0 4px;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }
    </style>
     </head>
      <body>
       <div class="wrap">
        <div class="absolute">
            <div id="accordion">

                <h3>Sample Iframe</h3>
                <div class="iframe"><div><iframe src="www.google.com" frameborder="0"    scrolling="no" width="370"></iframe></div></div>

            </div>
        </div>
    </div>

这是 html..trying 这个链接：http://jsfiddle.net/ChaseWest/AvEqM/

如何让它工作？

谢谢

【问题讨论】：

请在此处发布您的代码。该链接需要凭据。
很抱歉...app.box.com/s/vmkhhxcq4gfji2hxwtwx..can你现在请检查
只需在问题中发布您的代码。那个链接还是不行。包含代码的人更有可能阅读您的问题。
链接现在可以正常工作了。我也发布了代码谢谢

标签： javascript jquery html css iframe

【解决方案1】：

我相信您正在尝试将其从两个按钮系统更改为单个切换按钮。如果正确，试试这个。

<iframe id="iframe" src="http://jsfiddle.net/ChaseWest/Zfq7v/" width="100%" height="600px"></iframe>
<button id="one">toggle</button>

<script>
var buttonOne = document.getElementById("one");
var iframe = document.getElementById("iframe");
//need a variable to keep track of the active element
var active = 1;

buttonOne.addEventListener("click", buttonClick, false);

function buttonClick(e){
    if(active === 2){
        iframe.src = "http://jsfiddle.net/ChaseWest/Zfq7v/";
        active = 1;
    }else{
        iframe.src = "http://jsfiddle.net/ChaseWest/u73rF/";
        active = 2;
    } 
};
</script>

【讨论】：

我也无法让按钮工作...您能否将其集成到项目中并帮助我使其工作？