Hyperlink to Tab

Report · Feb 07, 2018

Hello everybody

Ich arbeite mit DW CC2018 und benutze Bootstrap - ganz tolles Tool!

Mein Problem: Ich möchte Hyperlinks direkt auf ein Ziel in einem Tab-Content setzen.

Beispiel 1: Im Tab "At Work" soll Use recycled paper angesteuert werden. Dazu muss ja der zweite Tab geöffnet werden und natürlich muss das Ziel mit einer id definiert werden.

Beispiel 2: Von einer anderen Seite soll Form walking/biking clubs angezeigt werden. Der Fall ist ähnlich, aber es handelt sich um ein Tab mit Dropdown.

Es gibt eine Menge Vorschläge im Internet, immer mit einem JS, das eingefügt werden muss.

Aber keine der Lösungen funktioniert.

Ich bin dankbar für jeden Hinweis, der zum Ziel führt.

Hier der Code für das Tab-Panel:

<li role="presentation" class="dropdown"><a href="#" id="tabDropOne1" class="dropdown-toggle" data-toggle="dropdown" role="tab" aria-controls="tab3" aria-haspopup="true" aria-expanded="false">In the community<span class="caret"></span></a>

<li><a href="#tabDropDownOne1" tabindex="-1" data-toggle="tab">Activities</a></li>

<li><a href="#tabDropDownTwo1" tabindex="-1" data-toggle="tab">Gardening</a></li>

</ul>

</li>

</ul>

<ul>

<li>Turn off lights in empty rooms</li>

<li>Use motion sensors to turn lights on</li>

<li>Install Compact Fluorescent lighting (CFL)</li>

<li>Turn the thermostat down</li>

</ul>

</div>

<ul>

<li>Use recycled paper.</li>

<li>Print on both sides of the paper</li>

<li>Turn your computer screen off when you leave your desk</li>

</ul>

</div>

<ul>

<li>Ask your local government to institute green policies</li>

<li>Form walking/biking clubs</li>

<li>Form a subscription club to swap newspapers and magazines</li>

</ul>

</div>

<ul>

<li>Create a community garden for herbs, fruits and vegetables</li>

<li>Recycle dead branches and lawn waste as mulch </li>

<li>Create a community garden for herbs, fruits and vegetables</li>

</ul>

</div>

Report · Feb 07, 2018

Im Prinzip muss der Link nur den Anker/die ID des Divs enthalten z.B. <a href="http://www.deineurl.com#paneTwo1">Use recycled paper</a>. Dass der Tab dann aber auch geöffnet ist, wird wahrscheinlich nicht möglich sein. Der jeweils offene Tab hat eine class "active", ich kenne aber keine Möglichkeit, das in den Link zu integrieren.

Report · Feb 07, 2018

Hallo Albrecht danke für die rasche Antwort. Ein Stück weiter bin ich damit. Mein Projekt: Eine Literaturliste ist mit Tabs in verschiedene Bereiche unterteilt. Gerne würde ich von anderen Seiten direkt auf ein Werk oder einen Verfasser verweisen, damit der Besucher nicht noch lange suchen muss. - Wäre schade, wenn das nicht möglich wäre!

Report · Feb 07, 2018

I am not sure that I understand what it is that you want to accomplish.

Have a look at the following (copy and paste into a new document)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body class="container">
<div>
<a class="btn btn-primary text-white" data-toggle="collapse" data-target="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Work</a>
<span class="dropdown">
  <a class="btn btn-primary dropdown-toggle-split dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</span>
</div>
<div id="accordion" class="mt-3">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Use Recycled Paper
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  </body>
</html>

And please tell us what you want changed.

Wappler, the only real Dreamweaver alternative.

Report · Feb 08, 2018

Hi Ben

many thanks for your answer and your proposal.

It is not really what I meant. So I try to explain it again.

1) I want to create a list of books, e.g. "Books for Children", "Cooking Books", "Travel Guides".

2) This list is a Tab-Panel.
Some of the Tabs are simple ones, some are Dropdown-Tabs. E.g. "Travel Guides" could have the panels "Europe", "USA", "Africa".

3) Each tab contents a list with books: Author and Titles in alphabetic order.

To create that with DW is no problem, the tool works fine.

BUT NO MY REQUEST.

Is it possible to reference a hyperlink to a specific Book inside of a Tab?

An example: I would set on an other page a hyperlink to a specific Travel Guide in the Content "Africa": Author: René Gardi, Title "Between Sahara and Sahel".

I combed so many sites in the web, but I didn't find a solution which works with DW 2018 including Bootstrap.

It would be great to know if and how it is realizable.

MS

Report · Feb 08, 2018

<Is it possible to reference a hyperlink to a specific Book inside of a Tab?>

I don't think Tabbed panels are your best choice. It would make a lot more sense to hyperlink directly to the Book's detail page with PHP and MySQL. And this is not something DW can do unless you purchase a commercial extension or code it yourself.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 08, 2018

Hi Nancy many thanks for your answer - it's a pitty, but after all, I know that I have to look for a different solution as you gave me the advise. MS

Adobe Community

Hyperlink to Tab

1 Correct answer