Управление вкладками не работает должным образом в ASP. net MVC - PullRequest
Новая
       20

Управление вкладками не работает должным образом в ASP. net MVC

0 голосов
/ 05 мая 2020

Я попытался реализовать элементы управления вкладками. Однако, когда я запускаю страницу, в 1-м экземпляре все поля из других вкладок будут отображаться на самой 1-й вкладке. Если я нажму на вторую вкладку, а затем вернусь на первую вкладку, я буду работать, как ожидалось.

Просмотр: 

<style>
        .tabs {
            height: 1475px; width: 100%; text-align: left; }

        .tab-nav-wrapper {
            width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }

        .tabs ul {
            display: block; overflow-y: hidden; margin: 0px; }

            .tabs ul li {
                display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }

                .tabs ul li.active {
                    border: 1px solid black; border-bottom: 3px solid white; }

                .tabs ul li a {
                    text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }

        .tab-content-wrapper {
            position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }

        .tab-content {
            display: block; height: 700px; width: 100%; }
</style>
<body>
        <div class="tabs">
            <div class="tab-nav-wrapper">
                <ul>
                    <li id="tab1Section" class="active"><a href="#tab1">Corporation Details</a></li>
                    <li id="tab2Section"><a href="#tab2">Contact Information</a></li>
                    <li id="tab3Section"><a href="#tab3">Documents</a></li>
                </ul>
            </div>
            <div class="tab-content-wrapper">
                <div id="tab1" class="tab-content">
                    Content 1
                </div>
                <div id="tab2" class="tab-content">
                    Content 2
                </div>
                <div id="tab3" class="tab-content">
                    Content 3
                </div>
            </div>
       </div>
</body>

<script>
  $(document).ready(function () {
    $(".tab-nav-wrapper li").click(function (e) {
      e.preventDefault();
      e.stopPropagation();

      $(".tab-nav-wrapper li").removeClass("active");
      $(this).addClass("active");

      var target = $(this).find("a").attr("href");
      $(".tab-content-wrapper").find(".tab-content").hide();
      $(".tab-content-wrapper").find(target).show();
    })
  });
</script>

Ниже приведен результат, который у меня есть. Как видите, последнее поле на вкладке 1 - это кнопка. Но я получаю, что вкладка 2 подключается ниже, а содержимое вкладки 3 после вкладки 2. enter image description here

Когда я нажимаю на вкладку 2 и возвращаюсь на вкладку 1, она работает, как ожидалось .

enter image description here

Может кто-нибудь, помогите мне с этим, пожалуйста?

1 Ответ

1 голос
/ 05 мая 2020

Измените на 

.tab-content {
   display: none;
   height: 700px;
   width: 100%; }

.tab-content + .tab-content{
   display: none;

Он должен скрыть все вкладки, кроме первой. чем ваш скрипт активирует необходимую вкладку

...