Форум

denis_kontarev · #1 (**permalink**) 11.10.2019, 13:23

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

<style>
.hidden{
    display:none;
}
.chosen{
    display:block;
}
</style>
<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="hidden"> some codes <xmp><script>jquery 1 here...</script></xmp></div>
<div id="2" class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div>
<div id="3" class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>

$(function() {
    $('#choice').change(function(){
        if( $('.chosen').length >0){
            $('.chosen').hide();
            $('.chosen').removeClass('chosen');
        }
        $('#' + $(this).val()).addClass('chosen').show();
    });
});

рони · #2 (**permalink**) 11.10.2019, 13:34

denis_kontarev,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hidden{
    display:none;
  }
  .hidden.chosen{
    display:block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $('#choice').change(function(){
      $('div.hidden').removeClass('chosen').eq(this.value).addClass('chosen')

    })
});
  </script>
</head>

<body>

<select id="choice">
<option value="0" selected>one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
<div  class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div>
<div  class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div>
<div  class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>

</body>
</html>

denis_kontarev · #3 (**permalink**) 11.10.2019, 18:03

с div все отлично, Рони. Но я ставлю в

<tr class="hidden chosen">

И получается какая то каша. Ничего не переключается.

рони · #4 (**permalink**) 11.10.2019, 18:06

denis_kontarev,
где пример вашего html?

denis_kontarev · #5 (**permalink**) 11.10.2019, 18:08

<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<tr class="hidden"> some codes</tr>
<tr class="hidden"> some codes</tr>
<tr class="hidden"> some codes</tr>

laimas · #6 (**permalink**) 11.10.2019, 18:14

В tr может быть только td, а уже в нем ... А xmp тег который не рекомендуется.

denis_kontarev · #7 (**permalink**) 11.10.2019, 18:22

Это как пример с просторов интернета был.

рони · #8 (**permalink**) 11.10.2019, 18:25

denis_kontarev,

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    table.test tbody tr{
        display:none;
    }
    table.test tbody tr.chosen{
        display: table-row;
    }
    td{
        border: 1px solid #FF1493
    }

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

    <script>
$(function() {
        $('#choice').change(function(){
            $('table.test tbody tr').removeClass('chosen').eq(this.value).addClass('chosen')

        })
});
    </script>
</head>

<body>

<select id="choice">
<option value="0" selected>one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>

<table width="400" class="test" >
	<thead>
		<tr >
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr class="chosen">
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
        <tr>
			<td>Cell 3.1</td>
			<td>Cell 3.2</td>
			<td>Cell 3.3</td>
		</tr>
	</tbody>
</table>
</body>
</html>

laimas · #9 (**permalink**) 11.10.2019, 18:26

Сообщение от denis_kontarev

пример с просторов интернета

Не знаю на каких просторах вы это взяли, но может быть только так:

<tr><td><div class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div></td></tr>

но никак не:

<tr><div class="hidden chosen"> some codes <xmp><script>jquery 1 here...</script></xmp></div></tr>

А xmp начиная с HTML3.2 устарел, а в HTML5 он полностью удален.

denis_kontarev · #10 (**permalink**) 11.10.2019, 18:57

Благодарю друзья за помощь! Все отлично!

Форум

Справочник

Discord чат

Курсы javascript