Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как в аккордеоне нажать на ссылку и что б надпись ссылки появилась в отдельном окне. (https://javascript.ru/forum/jquery/61558-kak-v-akkordeone-nazhat-na-ssylku-i-chto-b-nadpis-ssylki-poyavilas-v-otdelnom-okne.html)

рони 25.02.2016 01:56
olmensk,
$("li", ul).css("border-color", "white");

olmensk 25.02.2016 02:07
Цитата:
Сообщение от рони (Сообщение 409195)
olmensk,
$("li", ul).css("border-color", "white");
Вот так?
$(function() {
    var arrText = [];
    $(".list1, .list2, .list4").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $("li", ul).css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});

(( не работает ((

+ (indx == 2? 2 : 1) убираешь и цвета 1и2 аккор меняют но 3й акор меняет не в том блоке, а оставляешь, цвета не реагируют вообще нигде. ((((

рони 25.02.2016 02:10
olmensk,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    li{
         border: 5px solid Gray; padding: 5px; height: 100px; width: 100px
    }
    .bottom2{
        background-color: #FF00FF;
         color: #FFFF00;
    }

    .active {
        border: 1px  solid  #FF0000;
    }

  </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
$(function() {
    var arrText = [];
    $(".list1, .list2, .list3").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $("li", ul).css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});
  </script>
</head>

<body>
<div class="bottom1"></div><!--блок1 который будет закрашен выбранной картинкой из любого акордеона 1и2-->

<div class="bottom2"></div><!--блок2 который будет закрашен выбранной картинкой из акордеона 3-->

<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<div>
 <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1">аккордеон1</label>
   <article class="ac-small">
     <ul class="list1">
       <li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
       <li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
     </ul>
   </article>
  </div>
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container2"><!--аккордион2-->
<div>
 <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2">аккордеон2</label>
   <article class="ac-small">
     <ul class="list2">
       <li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
       <li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
     </ul>
   </article>
  </div>
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container3"><!--аккордион3-->
<div>
 <input id="ac-3" name="accordion-1" type="checkbox" />
  <label for="ac-3">аккордеон2</label>
   <article class="ac-small">
     <ul class="list3">
       <li path-img="images/c1.jpg"><img src="images/c1.jpg" data-title="надпись c1"></li>
       <li path-img="images/c2.jpg"><img src="images/c2.jpg" data-title="надпись c2"></li>
     </ul>
   </article>
  </div>
</section>


</body>

</html>

рони 25.02.2016 02:13
olmensk,
или я не подозреваю о каком цвете речь кроме бордюра для li

olmensk 25.02.2016 02:25
Да, тут работает,... но я переношу эту схему на мой "мод" и меняю всего один див bottom на своё название, дальше при + (indx == 2? 2 : 1) не работает, а если удалить то работает но 3й аккор меняет цвет не тому диву...

Вся структура 1 в 1 как я написал выше.

что не так? ((

Не бордер а заливка картинкой всего блока. непонимаю. .. надписи меняются как надо, а цвет перестал меняться...хотя аккор3 меняет, а аккр 1и2 перестали.

olmensk 25.02.2016 18:48
Цитата:
Сообщение от рони (Сообщение 409195)
olmensk,
Скажите пожалуйста, а если у меня такое, вместо сcылок на картинку, как-бы кнопка для div.
Как в таком случае правильно написать название, что б записалось в bloknot3?


<div class="bloknot3"></div><!-----БЛОКНОТ список----->

<!---------------------------------------------------><!-----div 1----->
<div id="mydiv7" style="display:none;">
 <div class="np2l-1">	
    <div class="shape cuboid-7 cub-7">
      <div class="face ft"></div>
</div>
<!---------------------------------------------------><!-----div 2----->
</div>
<div id="mydiv8" style="display:none;">
 <div class="np2l-1">	
    <div class="shape cuboid-8 cub-8">
      <div class="face ft"></div>
</div>
</div>
<!---------------------------------------------------><!-----div 3----->
<div id="mydiv9" style="display:none;">
 <div class="np2l-1">	
    <div class="shape cuboid-9 cub-9">
      <div class="face ft"></div>
</div>
</div>
<!--------------------------------------------------->

<!---------------------------------------------------><!-----аккордеон выбора кнопок------>
<input id="ac-13" name="accordion-1" type="checkbox" />
  <label for="ac-13">Заголовок</label>
    <article class="ac-small">
      <ul class="list5">
          <li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" data-title="текст название button7"></a></li>
          <li><a class="button8" href="javascript:void(0);" onclick="viewdiv('mydiv8');" data-title="текст название button8"></a></li>
          <li><a class="button9" href="javascript:void(0);" onclick="viewdiv('mydiv9');" data-title="текст название button9"></a></li>
       </ul> 
     </article>

<!-------------скрипт вписывания названия---------------->


//список 
$(function() {
    var arrText = [];
    $(".list1, .list2").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list1 li, .list2 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".wall-top").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot3").html(arrText.join("<br>"))})
    })
});

<!---------- скрывает-открывает div mydiv7--- mydiv8--- mydiv9--------------->
function viewdiv(id)
{
var el=document.getElementById(id);
if(el.style.display=="block")
{
el.style.display="none";
} else {
el.style.display="block";
}
}

olmensk 25.02.2016 21:14
РОНИ

Я разобрался, сделал чуть по другому, сделал так:
<li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" title="Угл"><img src="images/npview/button/7.png" data-title="- Дополнительный Угл"></a></li>
и всё заработало и менять в скрипте ничего не пришлось ))

рони 25.02.2016 21:43
olmensk,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     li{
       border: solid #FF00FF 3px;
     }
    li a{
      display: block;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 //список
$(function() {
    var arrText = [];
    $(".list5 li").each(function(indx, li) {
        arrText[indx] = "";
        $(li).click(function() {var img_path = $("a",this).attr("path-img"),title = $("a", this).data("title");
            $(".list5 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            //$(".wall-top").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot3").html(arrText.join("<br>"))})
    })
});
 function viewdiv(id)
{
var el=document.getElementById(id);
if(el.style.display=="block")
{
el.style.display="none";
} else {
el.style.display="block";
}
}

  </script>
</head>

<body>
<div class="bloknot3"></div><!-----БЛОКНОТ список----->

<!---------------------------------------------------><!-----div 1----->
<div id="mydiv7" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-7 cub-7">
      <div class="face ft">777</div>
</div></div>
<!---------------------------------------------------><!-----div 2----->
</div>
<div id="mydiv8" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-8 cub-8">
      <div class="face ft">888</div>
</div>
</div></div>
<!---------------------------------------------------><!-----div 3----->
<div id="mydiv9" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-9 cub-9">
      <div class="face ft">999</div>
</div>
</div></div>
<!--------------------------------------------------->

<!---------------------------------------------------><!-----аккордеон выбора кнопок------>
<input id="ac-13" name="accordion-1" type="checkbox" />
  <label for="ac-13">Заголовок</label>
    <article class="ac-small">
      <ul class="list5">
          <li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" data-title="текст название button7">7</a></li>
          <li><a class="button8" href="javascript:void(0);" onclick="viewdiv('mydiv8');" data-title="текст название button8">8</a></li>
          <li><a class="button9" href="javascript:void(0);" onclick="viewdiv('mydiv9');" data-title="текст название button9">9</a></li>
       </ul>
     </article>

<!-------------скрипт вписывания названия---------------->

</body>

</html>

olmensk 26.02.2016 15:15
Спасибо огромное, всё работает, то, что я искал )))

olmensk 26.02.2016 15:26
Скажите пожалуйста ещё одно, а как сделать, что б при "вЫключении блока", его надпись тоже "отключалась" из списка?
Просто получается блоки можно "скрыть или показать", а надпись появилась и навсегда даже когда блок скрыт.
Если невозможно, тогда ладно, Вы и так мне очень помогли, спасибо.

рони 26.02.2016 20:53
olmensk,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     li{
       border: solid #FF00FF 3px;
     }
    li a{
      display: block;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 //список
$(function() {
    var arrText = [];
    $(".list5 li").each(function(indx, li) {
        arrText[indx] = "";
        $(li).click(function() {var img_path = $("a",this).attr("path-img"),title = $("a", this).data("title"), id = $("a", this).data("viewdiv");
            $(".list5 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            id = $(id).toggle().is(":hidden")
            arrText[indx] = id ? "" : title;
            $(".bloknot3").html(arrText.join("<br>"))})
    })
});
  </script>
</head>

<body>
<div class="bloknot3"></div><!-----БЛОКНОТ список----->

<!---------------------------------------------------><!-----div 1----->
<div id="mydiv7" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-7 cub-7">
      <div class="face ft">777</div>
</div></div>
<!---------------------------------------------------><!-----div 2----->
</div>
<div id="mydiv8" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-8 cub-8">
      <div class="face ft">888</div>
</div>
</div></div>
<!---------------------------------------------------><!-----div 3----->
<div id="mydiv9" style="display:none;">
 <div class="np2l-1">
    <div class="shape cuboid-9 cub-9">
      <div class="face ft">999</div>
</div>
</div></div>
<!--------------------------------------------------->

<!---------------------------------------------------><!-----аккордеон выбора кнопок------>
<input id="ac-13" name="accordion-1" type="checkbox" />
  <label for="ac-13">Заголовок</label>
    <article class="ac-small">
      <ul class="list5">
          <li><a class="button7" href="javascript:void(0);" data-viewdiv="#mydiv7" data-title="текст название button7">7</a></li>
          <li><a class="button8" href="javascript:void(0);" data-viewdiv="#mydiv8" data-title="текст название button8">8</a></li>
          <li><a class="button9" href="javascript:void(0);" data-viewdiv="#mydiv9" data-title="текст название button9">9</a></li>
       </ul>
     </article>

<!-------------скрипт вписывания названия---------------->

</body>

</html>

olmensk 26.02.2016 22:28
РОНИ Вы просто супер!! Всё работает как надо!! ОГРОМНОЕ СПАСИБО!! Я указал Вас возле скрипта =)


Часовой пояс GMT +3, время: 15:01.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице