Question

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

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

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

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

HTML - ＆gt;

<!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 ..试着这个链接：http://jsfiddle.net/ChaseWest/AvEqM/

如何让它发挥作用？

由于

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

Accordion Jquery - Toggle Button实现

1 个答案: