2013-04-12 4 views
0

Im new для javascript, используя и редактируя код, найденный онлайн.закрыть 1 вкладку javascript, когда другой открывается

До сих пор у меня есть это, что работает.

<script language="javascript"> 
function welcome() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome"; 
    } else { 
     ele.style.display = "welcome"; 
     text.innerHTML = "Planning Statements"; 
     document.getElementById("toggleText1").style.display = 'none'; 
     document.getElementById("toggleText2").style.display = 'none'; 
    } 
} 

function welcome1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome 1"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "welcome1"; 
     document.getElementById("toggleText").style.display = 'none'; 
     document.getElementById("toggleText2").style.display = 'none'; 
    } 
} 

function welcome2() { 
    var ele = document.getElementById("toggleText2"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome 2"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "welcome2"; 

    } 
} 
    </script> 

        <li style="text-align:left; margin-left:5px;"><a id="displayText" href="javascript:welcome();">welcome</a></li> 
        <li style="text-align:left; margin-left:5px;"><a id="displayText1" href="javascript:welcome1();">welcome 1</a></li> 
        <li style="text-align:left; margin-left:5px;"><a id="displayText2" href="javascript:welcome2();">welcome 2</a></li> 

    <div id="toggleText" style="display: none"> 
    <p>Welcome World!</p> 
    </div> 
    <div id="toggleText1" style="display: none"> 
    <p>Welcome World again!</p> 
    </div> 
    <div id="toggleText2" style="display: none"> 
    <p>Welcome World again wow!</p> 
    </div> 

Для меня это работает. Когда вы нажмете «привет», он отобразит приветственный мир. Когда вы нажмете приветствие 1 .... он поддерживает мир приветствия, а затем снова отображает приветственный мир.

В любом случае, для закрытия функции добро пожаловать, если функция приветствует 1 открывается.

+0

Этот код должен быть вызван или привязан к обработчику событий где-то, но неясно, где. Весь ваш тег скрипта определяет две функции. Где 'welcome();' и 'welcome1();' или, возможно, 'document.getElementById ('toggleText')' + еще больше вещей? Найдите HTML-код, где он щелкнул, или .js-файл, или атрибут html 'onclick = 'toggleText()", который следует избегать, когда вы знаете больше. –

+0

Вы показываете мне две функции, которые никогда не запускаются или не ссылаются на что-то, что может их запустить, и два div с тегами абзаца внутри них, которые не будут отображаться из-за установленных атрибутов стиля. Здесь ничего не происходит. Это не может быть все, что нужно, если что-то действительно происходит динамически, что я подразумеваю под «работами». Вы смотрите на код сервера? Сделайте просмотр в браузере. Вот где HTML, который фактически построен и обслуживается, можно увидеть полностью. –

+0

Пожалуйста, используйте некоторые отступы и разместите все соответствующие коды, чтобы получить более быстрые ответы. –

ответ

0

Это следует сделать это:

<script language="javascript"> 

function welcome() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Welcome"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "Welcome"; 
     document.getElementById("toggleText1").style.display = 'none'; 
    } 
} 

function welcome1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Welcome 1"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "Welcome 1"; 
     document.getElementById("toggleText").style.display = 'none'; 
    } 
} 
</script> 

<div id="toggleText" style="display: none"> 
<p>Welcome World!</p> 
</div> 
<div id="toggleText1" style="display: none"> 
<p>Welcome World again!</p> 
</div> 

Что нужно, когда вы скрываете показать элемент, убедитесь, что вы скрываете другой.

+0

Спасибо за ваш ответ! Это сделало это для меня. Только один последний вопрос, скажем, у меня есть еще одна функция под названием welcome2. Что делает то же самое, что и другие 2 функции, и имеет toggletext2 и . displaytext2 , где у вас есть потайная часть ... я попробовал это за прием и welcome1: document.getElementById ("toggleText1") style.display = 'ни'; document.getElementById ("toggleText2").. style.display = 'none'; Но мне не повезло скрыть это. Изменен и мой оригинальный код, если это помогает понять. – lecardo

+0

Это та же концепция, вам просто нужно извлечь элементы с помощью getElementById и установить «стиль». display = 'none' ". Когда вы добавляете новый, просто не забудьте добавить их i n первые две функции. BTW: не забудьте принять ответ, если он вам помог – Kenneth

Смежные вопросы