Jump to content
  • 0

Кнопки


Karamba
 Share

Question

Помогите кто, как сделать кнопку например "Привет, как дела?", и чтобы после нажатия на эту кнопку чуть ниже показался какой нибудь текст, например "Привет,хорошо"

Плиз помогите очень надо...

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Читаем про событие onClick, функцию getElementById() и, допустим, про свойство innerHTML. Хотя тут вариантов реализации может быть много. Еще можно менять свойство display у элемента с надписью или целиком класс при помощи свойства className.

Link to comment
Share on other sites

  • 0

Самое простое решение, которое я нагло позаимствовал у студии им. Гражданина Лебедева.

<a href="#" onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none';
return(false)">:-)</a>
<div id="yr" style="display: none;">текст</div>

Как уже доделать до нужного сам додумаешь :lol:

Link to comment
Share on other sites

  • 0

Имеется кнопка в контакте, по задумке нужно разместить рядом кнопку твиттера и остальных соц сетей.

Добавляя новую кнопку она должна становится правее предыдущей и все они должны находиться в центре, внизу страницы.

Примерно вот так

<—-- нижний центр страницы —-->

Вот мой сайт с кнопкой вконтакте: http://semenkovofm.comuv.com/

Link to comment
Share on other sites

  • 0
  Great Rash said:
Во-первых, что помешало создать отдельную тему?

Во-вторых, что вы уже сделали для решения вашей проблемы?

1.Нашёл похожую тему этому не счёл нужным создавать новую

2. Прописал css в шапке сайта:

<style type="text/css">
<!--
.buttons {
position: absolute;
top: 95%;
left: 50%;
}

и привязал кнопку к этому css

  psywalker said:
На JS закидываешь элемент в конец контейнера с кнопками и ставишь им float: left;

Я новичёк в таком деле можно ппоподробнее

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy