1

Подскажите, как сделать так, чтобы при клике по кнопке появлялся текст div'a, а изначально был показан текст первого div'a?

HTML

    <div class="container-fluid">
    <div class="row-fluid">
        <div class="col-sm-3 col-md-6 col-lg-4">
            <div class="list-group">
                <a class="list-group-item">First item</a>
                <a class="list-group-item">Second item</a>
                <a class="list-group-item">Third item</a>
            </div>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8">
            <div class="section">Some text</div>
            <div class="section">And more text</div>
            <div class="section">Lorem ipsum</div>
        </div>
    </div>
</div>

<!-- jQuery Core -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS

    .list-group-item {
       margin: 10px;
       position: relative;
       display: block;
       cursor: pointer;
    }

    .section {
       display: none;
    }

jQuery

   $(".list-group-item").on("click", function(){
var idx = $(this).index();

$(".section").hide();
$(".section").eq(idx).toggle(); 
});

4 ответа 4

0

$(".section").eq(idx).toggle(); я бы заменил для пущей уверенности $(".section").eq(idx).show(); ну и есть замечательный класс у bootstrap hide

    <div class="col-sm-9 col-md-6 col-lg-8">
        <div class="section">Some text</div>
        <div class="section hide">And more text</div>
        <div class="section hide">Lorem ipsum</div>
    </div> 

Стиль .section удалите он не нужен, а jQuery перепишите

$(".list-group-item").on("click", function(){
   var idx = $(this).index();

   $(".section").addClass('hide');
   $(".section").eq(idx).removeClass('hide'); 
});
0

Раз мы говорим о bootstrap, может лучше использовать collapse, по смыслу вроде подходит, вот: http://getbootstrap.com/javascript/#collapse

2
  • 2
    пожалуйста, добавьте пример по возможности
    – mymedia
    21 июн 2017 в 22:58
  • Collapse тут, к сожалению, не подходит, ибо вся информация будет выпадать в колонке справа.
    – user255647
    21 июн 2017 в 23:57
0

Можно так, естественно можно задать определенному a открытие

$(".list-group-item").on("click", function(event){
  event.preventDefault();
  $(".dn").toggle();
});
	.dn{
		display: none;
	}

	.list-group-item {
		 margin: 10px;
		 position: relative;
		 display: block;
		 cursor: pointer;
	}
<div class="container-fluid">
	<div class="row-fluid">
			<div class="col-sm-3 col-md-6 col-lg-4">
					<div class="list-group">
							<a class="list-group-item">First item</a>
							<a class="list-group-item">Second item</a>
							<a class="list-group-item">Third item</a>
					</div>
			</div>
			<div class="col-sm-9 col-md-6 col-lg-8 dn">
					<div class="section">Some text</div>
					<div class="section">And more text</div>
					<div class="section">Lorem ipsum</div>
			</div>
	</div>
</div>

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

4
  • Зачем создавать классы которые есть в bootstrap?
    – Shnur
    21 июн 2017 в 22:36
  • Ваш класс .dn так же бессмыслен так как есть у botstrap класс .hide
    – Shnur
    21 июн 2017 в 22:38
  • Я скопировал код указанный выше. Внес только изменения. Вопрос чистки не стоял. Этот код пример как все работает, не думаю что резонно вставлять в пример код бутстрапа 21 июн 2017 в 22:39
  • Так Ваш пример вообще и не рабочий.
    – Shnur
    21 июн 2017 в 22:41
0

Используйте Bootstrap Tabs

Пример

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-4">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">First item</a></li>
                <li><a data-toggle="tab" href="#tab2">Second item</a></li>
                <li><a data-toggle="tab" href="#tab3">Third item</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8">
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade in active">
                    <h3>Title 1</h3>
                    <p>Some content.</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <h3>Title 2</h3>
                    <p>Some content.</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <h3>Title 3</h3>
                    <p>Some content.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.