Javascript 管理复杂的选择/取消选择艺术/专辑/歌曲

首先，我为这个模糊的标题感到抱歉，但我不知道如何更好地解释我的问题

不管怎样，这就是我想要的。假设我们有三个选项卡：一个显示艺术家列表，一个显示专辑列表，一个显示歌曲。所有这三个选项卡都有可选择的列表，我希望能够，例如，选择和艺术家，然后转到现在应显示为全部选定的相册，因为我选中了艺术家，能够取消选择一个相册，然后，例如，能够转到歌曲并单独管理歌曲。 当然，我应该能够检索用户选择的所有歌曲的列表

编辑1 添加了两个图像以更好地解释

编辑2 添加了一些代码。目前我只有HTML和CSS，我正在等待您对JS代码的帮助：

这就是HTML结构

<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
  <div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <div class="item-content.modificato">
          <div class="item-media modificato">
            <i class="icon icon-form-checkbox modificato"></i>
          </div>  
          <a href="#" class="item-link" id="apriTitoliLibro1">
            <div class="item-inner modificato">
              <div class="item-title-row">
                <div class="item-title">Artist 1</div>
              </div>
              <div class="item-subtitle">Some Text</div>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="item-content.modificato">
          <div class="item-media modificato">
            <i class="icon icon-form-checkbox modificato"></i>
          </div>  
          <a href="#" class="item-link" id="apriTitoliLibro2">
            <div class="item-inner modificato">
              <div class="item-title-row">
                <div class="item-title">Artist 2</div>
              </div>
              <div class="item-subtitle">Some Text</div>
            </div>
          </a>
        </div>
      </li>
      [...]  
    </ul>
  </div>
</div>
<div id="tab2" class="tab">
  <div class="content-block-title">Seleziona Album</div>
  <div class="list-block media list">
    <div class="list-group">
      <ul>
        <li class="list-group-title">Artist 1</li>
        <li id="titoliLibro1">
          <div class="item-content-modificato titoli">
            <div class="item-media modificato fake-media-list">
              <i class="icon icon-form-checkbox modificato"></i>
            </div>  
            <a href="personalizzaArticoli.html" class="item-link">
              <div class="item-inner modificato titoli">
                <div class="item-title-row modificato">
                  <div class="item-title modificato">Album 1</div>
                  <div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
                </div> 
              </div>
            </a>
          </div>
        </li>
        <li>
          <div class="item-content-modificato titoli">
            <div class="item-media modificato fake-media-list">
              <i class="icon icon-form-checkbox modificato"></i>
            </div>  
            <a href="personalizzaArticoli.html" class="item-link">
              <div class="item-inner modificato titoli">
                <div class="item-title-row modificato">
                  <div class="item-title modificato">Album 2</div>
                  <div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
                </div> 
              </div>
            </a>
          </div>
        </li>
        [...]
      </ul>
    </div>
  </div>
</div>
<div id="tab3" class="tab">
  <div class="content-block-title">Seleziona song</div>
    <div class="list-block searchbar-not-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
          </div>
        </li>
      </ul>
  </div>
</div>

编辑3 这是一个phonegap应用程序，是的，已经尽可能少地使用jQuery来提高性能：

现在我的问题是：处理这个问题的最好方法是什么？我唯一的想法是创建一个数组，并用所有选中的元素更新它，为了显示一个元素是否选中，用indexOf检查它是否存在……这是一个好方法吗？我有点担心性能

---

谢谢

很难回答，没有看到一些代码。HTML，JS，CSS。。。？有什么开始吗？你会使用jQuery吗？您想在JSON对象级别上操作，还是在DOM元素上使用鼠标事件进行简单选择？添加了问题并提供了更多信息，抱歉：